详解Vue 中 extend 、component 、mixins 、extends 的区别
new Vue()、component首先我们来约定一个选项对象 baSEOptions,后面的代码会用到. {{firstName}} {{lastName}} aka {{alias}}',data: function () {
return {
firstName: 'Walter',lastName: 'White',alias: 'Heisenberg'
}
},created(){
console.log('onCreated-1');
}
};
new Vue() source:vue/src/core/instance/index.js实例化一个组件. onCreated-1
component source:vue/src/core/global-api/assets.js
Vue.component 是用来注册或获取全局组件的方法，其作用是将通过 Vue.extend 生成的扩展实例构造器注册（命名）为一个组件.全局注册的组件可以在所有晚于该组件注册语句构造的Vue实例中使用. 当我们需要在其他页面‘扩展'或者叫‘混合'baSEOptions时,Vue中提供了多种的实现方式:extend,mixins,extends. extend source:vue/src/core/global-api/extend.js可以扩展 Vue 构造器，从而用预定义选项创建可复用的组件构造器。 onCreated-1
// -> onCreated-2
mixinsmixins 选项接受一个混合对象的数组。这些混合实例对象可以像正常的实例对象一样包含选项,他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。 onCreated-1
// -> onCreated-2
extends这和 mixins 类似，区别在于，组件自身的选项会比要扩展的源组件具有更高的优先级. 官方文档是这么写的,除了优先级,可能就剩下接受参数的类型吧,mixins接受的是数组. onCreated-1
// -> onCreated-2
从结果上看,三种方式都能实现需求,但是形式却有不同.
从源码来看通过extend,extends和mixins三种方式接收的options,最终都是通过mergeOptions进行合并的.差异只是官方文档中提到的优先级不同extend > extends > mixins. 所以,如果是简单的扩展组件功能,三个方式都可以达到目的.
而这三种方式使用场景上细化的区分,目前我也蒙圈中... //几种方式的不同示例: ... 选项对象合并策略 Vue.config.optionMergeStrategies上面提到的选项对象,是在mergeOptions中按照一定策略进行合并的. 打印Vue.config.optionMergeStrategies,你会看默认的optionMergeStrategies如下:
mergeAssetsmergeAssets合并方法里,用到了原型委托.他会先把父组件的属性放在创建的新对象的原型链上.然后扩展新对象 对象里查找属性的规则 :举个例子，当查找一个属性时，如 obj[a],如果 obj 没有 a 这个属性，那么将会在 obj 对象的原型里找，如果还没有，在原型的原型上找，直到原型链的尽头，如果还没有找到，返回 undefined。 总结
如果按照优先级去理解,当你需要继承一个组件时,可以使用Vue.extend().当你需要扩展组件功能的时候,可以使用extends,mixins.但目前为止还没有碰到完美诠释他们的场景,抱歉,能力有限😂 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
