详解Vue2.0组件的继承与扩展

2.extends和mixins优先级比较

 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 id="itany">
  <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>

如果有需要源代码，请猛戳源代码

参考文章

Vue官方文档