2020-11-01 Vue mixin

1. Vue mixin需要注意的地方

• 方法和参数在各组件中不共享，也就是说，不会想Vuex一样一个组件更改了mixin的数据，另一个组件打印mixin是不会变的

• 混合对象里的钩子函数在组件里的钩子函数之前调用，也就是说，当我们mixins定义的数据，生命周期函数或其他钩子函数出问题的时候，mixin是在放在前面调用的，举个例子：

钩子函数冲突时：

mixins：

组件的方法：

控制台打印：

数据冲突时：

// mixin.js file
export default {
   data () {
      title: ‘Mixin’
   }
}
// -----------------------------------------------------------

// main.js file
import mixin from ‘./mixin.js’
export default {
   mixins: [mixin],
   data () {
      title: ‘Component’
   },
   created: function () {
      console.log(this.title)
   }
}
// => "Component"