mixins和vue3 composition对比

mixins简述

mixins模式，将代码中可复用的方法、数据提取出来，最终这些选项会被合并到最终的选项中，若遇到同名的方法或钩子，有内部的一套合并方法。 【参考链接】

// mixin.js
export default{
    data() {
        return {
            name: 'bob'
        }
    },
    method: {
        getName() {
            console.log("mixins name: ", this.name)
        }
    }
}

// component.js
import mixin from "./mixin.js"

export default{
    mixins: [mixin],
    onload(){
        console.log("name:", this.name)
        this.getName()
    }
}

mixins缺点

混用mixins太多，不容易调试代码，不能直接的定位到调用的方法是哪个，增加了调试的成本，不了解mixins封装代码，维护成本也会较高。命名冲突，方法冲突依赖框架自身的合并方法，会隐藏一些问题。

vue3 composition 模式

// useAnimal.js
import { ref, computed } from "vue";

export default function () {
    const species = ref('cat');
    return {
        species
    }
}

// myComponent.js
import useAnimal from "./useAnimal.js"

export default {
    setup() {
        const {species} = useAnimal()
        
        return {
            species
        }
    }
}

通过这样引入，解决了命名冲突的问题，因为命名变量的方式和其他变量都是一样的。