Vue mixins笔记自用

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

我的理解就是：mixin就是将组件之间的公共部分抽离出来的部分。由于mixin在各自组件的更改是独立、不会污染其他组件的，所以mixin有其适用场景(等用到了再补充)

Mixin 和 Vuex 的区别

• Vuex是公共状态管理，也就是说他的状态在所有组件是统一的，而且组件不能直接对store中的数据进行更改，必须统一commit给mutations更改
• Mixin是抽离公共组件部分，他的数据和方法都是独立的，组件之间使用后互不影响，而且可以在组件中直接对其进行更改。
• 二者的数据都是经过响应式处理的。

Mixin基础使用

局部引入

创建mixins.js并在app.vue中引入，局部引入import后使用`mixins:[mixins]

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <hr>
    <h3>{{msg}}</h3>
    <button style="width:50px;height:50px;border-radius: 50px;" @click="mixinTest">mixins test</button>
    <button style="width:50px;height:50px;border-radius: 50px;" @click="mixinChange">mixins change</button>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import { mixins } from './mixin/mixin';

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  methods: {
    mixinTest() {
      console.log(this.msg);
    },
    mixinChange() {
      this.msg = "i have been changed"
    }
  },
  mixins:[mixins],
  created() {
    console.log("created in app.vue");
  },
  mounted() {
    console.log("mounted in app.vue");
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

全局引入

全局注册的方式，在main.js引入后用Vue.mixin(mixins)注册

import Vue from 'vue'
import App from './App.vue'
import { mixins } from './mixin/mixin'

Vue.config.productionTip = false
Vue.mixin(mixins)
new Vue({
  render: h => h(App),
}).$mount('#app')

选项合并

1. 生命周期函数 首先执行mixins内的生命周期函数，然后执行组件内的生命周期函数，参考下图
   2. 方法或数据
   以组件内为主