vue2 mixins混入

1.mixins混入

在vue中提供了一种复用性的操作，所混入的对象包含任意组件的选项（data|computed，生命周期|watch，methods）

2.mixins使用基本规则（选项合并冲突）

• data | computed：数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先
• 生命周期 | watch：同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用
• methods：将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对

 
    

        
data里面的数据:{{msg}}
        
computed里面的数据:{{title}}
        
watch里面的数据:{{obj.a}}
        获取方法的数据
    
    

3.全局混入

在main.js入口文件中使用Vue.mixin()引入。

尽量不用使用mixin全局混入，它将影响每一个之后创建的 Vue 实例（包括第三方插件 ）

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})