Vue中的mixins和extends

最新推荐文章于 2025-01-14 13:37:37 发布

原创最新推荐文章于 2025-01-14 13:37:37 发布 · 349 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

javascript 同时被 2 个专栏收录

3 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

本文详细解析了Vue.js中Mixins与Extends的使用方式与优先级，阐述了它们在组件复用与拓展中的作用。通过具体代码样例展示了不同混入与拓展方法的执行顺序，以及如何避免代码污染。

关于mixins和extends

样例

data(){
        return{
            num: 0
        }
    },
    methods:{
        add:function(){
            this.num++;
            console.log('原生方法add!');
        }
    },
    updated:function () {
        console.log('updated方法!');
    },
    mixins:[{
        methods:{
            add:function(){
                this.num++;
                console.log('mixins 方法add!');
            }
        },
        updated: function(){
            console.log("mixins updated方法!")
        }
    }],
    extends:{
        methods:{
            add:function(){
                this.num++;
                console.log('extends 方法add!');
            }
        },
        updated: function(){
            console.log("extends updated方法!")
        }
    }

mixins选项接受一个混入对象的数组，extends选项的参数是对象
需要注意使用两个选项时的钩子函数调用顺序：在样例中，执行顺序依次是：原生方法add! --> extends updated方法! --> mixins updated方法! --> 内部updated方法! 若加入全局API混入方式，
```
Vue.mixin({
    updated:function(){
        console.log('全局mixin updated方法!');
    }
})
```
执行顺序依次是：原生方法add! --> 全局mixin updated方法! --> extends updated方法! --> mixins updated方法! --> 内部updated方法! 可以理解为优先级 Vue.mixin > extends > mixins,三种方式都是为了拓展组件，而Vue.extend是创建构造器，为了可复用组件，优先级也高于之前的三个
mixins混入和extends拓展的同名方法（add）并不会覆盖内部方法，因此可以只会出现一次“原生方法add!”
关于mixins的用途：构造器写好后临时增加方法，为减少不必要风险和代码污染；因为传参是数据，公共部分代码可复用