vue3中mixins的使用

vue3-mixins

在开发的过程中我们会遇见相同或者相似的逻辑代码。
可以通过vue的 mixin 功能抽离公共的业务逻辑，
然后通过impor再组件中引入。通过mixins注册进来。
这样我们就可以使用mixin中共同的业务逻辑
我们通常会在src下创建一个文件夹mixins。
然后在创建mixins/index.js文件

index.js

import { ref } from 'vue'
export default function () { 
    let num = ref(0);
    let like = ref(false)
    let favBtn = () => { 
        num.value += 1;
        like.value = false
        setTimeout(() => { 
            like.value=true
        })
    }
    // 暴露出去
    return {
        num,
        like,
        favBtn
    }
}

TestA.vue文件(组件)

TestB.vue文件(组件)

使用组件的页面

解释

从上面的图中发现：
在混合mixin中，各个数据彼此是互相独立的。不会互相影响。