vue学习(二) - 扩展组件

在日常开发中，一定要有偷懒的欲望，大部分的前端开发工具，都是程序员为了偷懒，解放劳动力才产生的

工作中如何去偷懒呢，首推的就是公用提取、组件封装了。将可复用的东西都单独提出来，可以让我们少写很多代码。这里我们重点来看下vue的# extend、mixins、extends。

1.extend

产生一个继承自Vue类的子类，只会影响这个子类的实例对象，不会对Vue类本身以及Vue类的实例对象产生影响。 和vue.component()作用基本相同，但是component会注册组件名，不过在动态插入组件时，建议通过extend()。

<div id="mount-point"></div>
// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')

2.minxins.

mixin是对Vue类的options进行混入。所有Vue的实例对象都会具备混入进来的配置行为。相比extends是多继承。

var mixin = { 
    created: function () { console.log(1) } 
} 
var vm = new Vue({ 
    created: function () { console.log(2) }, 
    mixins: [mixin] 
})

mixins要点

• data混入组件数据优先
• 钩子函数将混合为一个数组，混入对象的钩子将在组件自身钩子之前调用
• 值为对象的选项，例如 methods, components 和 directives，将被混合为同一个对象。两个对象键名冲突时，取组件对象的键值对。
• 以上合并策略可以通过Vue.config.optionMergeStrategies修改

3.extends

声明扩展另一个组件(可以是一个简单的选项对象或构造函数)，而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。extends触发的优先级更高。

var otherComp= { ... } 
// 继承 
otherComp var comp = { 
    extends: otherComp
}

4.最后

• 优先级Vue.extend>extends>mixins