var extend={ data:{extendData:'我是extend的data'}, created:function(){ console.log('这是extend的created'); } } var mixin={ data:{mixinData:'我是mixin的data'}, created:function(){ console.log('这是mixin的created'); } } var vm=new Vue({ el:'#app', data:{mixinData:'我是vue实例的data'}, created:function(){ console.log('这是vue实例的created'); }, methods:{ getSum:function(){ console.log('这是vue实例里面getSum的方法'); } }, mixins:[mixin], extends:extend })
由此可以得出，相对于mixins,extends触发的优先级更高
四、extend
Vue.extend只是创建一个构造器,它是为了创建可复用的组件。其主要用来服务于Vue.component，用来生成组件
<div> <hello></hello> <my-world></my-world> </div> <script> /** * 方式1：先创建组件构造器，然后由组件构造器创建组件 */ //1.使用Vue.extend()创建一个组件构造器 var MyComponent = Vue.extend({ template: '<h3>Hello World</h3>' }); //2.使用Vue.component(标签名,组件构造器)，根据组件构造器来创建组件 Vue.component('hello', MyComponent); /** * 方式2：直接创建组件(推荐) */ // Vue.component('world',{ Vue.component('my-world', { template: '<h1>你好，世界</h1>' }); var vm = new Vue({ //这里的vm也是一个组件，称为根组件Root el: '#itany', data: {} }); </script>
如果有需要源代码，请猛戳源代码