Vue（12）

mixin 混入

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

简单来说：
如果多个组件有很多相同的功能，那么就可以把这些相同的功能抽离出来写成一个混入对象，如有需要直接引入使用混入即可，引入后混入中在data中定义的数据，methods中定义的方法等都会成为组件中自己的数据和方法，相当于将混入对象中的数据、方法等合并到组件身上，可以减少代码的冗余。

mixin 混入功能:
可以把多个组件共用的配置提取成一个混入对象

mixin 混入的写法和使用
混入对象和组件对象基本是相同，都有data、method和一系列生命周期钩子函数。

// 1. 创建mixin.js并导出混入对象
export default {
  data() {
    return {
      str: 'mixin'
    }
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  ....
  methods: {},
  ...
}

// Vue组件使用
<script>
// 2. 引入mixin.js
import mixin from '../mixin'
export default {
  // 3. 使用混入对象
  mixins: [mixin],
  mounted() {
    console.log(this.str);
  }
};
</script>

mixin 混入的规则

1. 数据重复以组件数据为准
   数据对象进行合并，其中的基本数据类型在和组件的数据发生冲突时以组件数据优先，
   组件中的数据会覆盖混入对象的数据。

2. 引用数据类型会进行深参差的递归合并
   数据对象中如果有引用数据类型，引用数据类型会进行深参差的递归合并。

3. 混入的生命周期优先于组件生命周期执行
   生命周期钩子函数混合为一个数组，当使用组件时，组件的函数和混和的函数都执行，混入中的函数会先执行，组件的函数后执行。

4. 值为对象的选项键名冲突时，取组件对象的键值对
   值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

props,data,mixin中的数据优先级谁最高？
props中的数据，data中的数据，mixin中的数据，
如果出现同名的情况下： props中的优先级最高 data中的其次。
但是如果mixin中有生命周期这种特殊的函数和组件中的同名生命周期函数发生冲突了：两个都运行。

plugin 插件

plugin功能:

用于增强 vue
第二个以后的参数是插件使用者

plugin本质:
包含 install 方法的一个对象， install 的第一个参数是 Vue，
传递的数据

plugin使用插件:

Vue.use()

plugin应用场景：
vue cli插件plugins中的方法均可以被任意组件调用，增强Vue的功能。

首先在创建好的vue项目的src目录下新建plugins.js：

export default {
  install(Vue) {
    // 全局过滤器
    Vue.filter('mySlice', function(value){
      return value.slice(0, 4);
    });
    
    // 自定义指令
    Vue.directive('fbind', {
      bind(el, binding, vnode) {
        el.value = binding.value;
      },
 
      inserted(el) {
        el.focus();
      },
 
      update(el, binding) {
        el.value = binding.value;
      }
    });
 
    // Vue构造函数原型上添加方法
    Vue.prototype.hello = ()=>{
      console.log('hello');
    }
 
  }
}

在main.js中引入plugins，并使用Vue.use应用插件：

import Vue from ‘vue’
import App from ‘./App’
import plugins from ‘./plugins’

Vue.config.productionTip = false
Vue.use(plugins)

new Vue({
el: ‘#app’,
render: h => h(App)
})

School.vue组件中使用插件plugins中的方法：
<template>
  <div>
    <p>学校名称：{{name | mySlice}}</p>
    <p @click="test">学校地址：{{address}}</p>
    <input type="text" name="" v-fbind.value="name">
  </div>
</template>
 
<script>
 
export default {
  name: 'School',
  data() {
    return {
      message: 'hello world',
      name: 'zz@#1234',
      address: 'bj'
    }
  },
  methods: {
    test() {
      this.hello()
    }
  }
}
</script>
 
<style>
 
</style>

scoped 样式

scoped作用:
让样式在局部生效，防止冲突

scoped写法:

<style scoped>

vue 中的 webpack 并没有安装最新版，导致有些插件也不能默认安装最新版，如
npm i less-loader@7，而不是最新版

scoped的原理

为组件实例生成一个唯一标识，给组件中的每个标签对应的dom元素添加一个标签属性：data-v-xxxx
给<style scoped>中的每个选择器的最后一个选择器添加一个属性选择器，原选择器[data-v-xxxx]，
如：原选择器 为：
.container #id div，
则更改后选择器为：
.container #id div[data-v-xxxx]