1、directives 指令

• 内置指令
  • v-if、v-for、v-show、v-html 等
• 如何自己造一个指令？
  • 目标：造出 v-x，点击即出现一个 x

两种写法

1. 声明一个全局指令

Vue directive('x',directiveOptions)
// 然后就可以在任何组件中使用 v-x
Vue.direrctive('x',{
    //当被绑定的元素插入到 DOM 中时
    inserted:function(el){
        el.addEventListener('click',()=>{console.log('x')})
    }
})

2. 声明一个局部指令

new Vue({
    ...,
    directives:{
        "x":directiveOptions,
    }
})
//v-x 只能用在该实例中

• 其中的 directiveOptions 里有哪些属性呢？

• 五个函数属性

  1. bind(el,info,vnode,oldVnode) - 类似 created
  2. inserted(el,info,vnode,oldVnode) - 类似 mounted，被绑定的元素插入到 DOM 中时
  3. update(el,info,vnode,oldVnode) - 类似 updated
  4. componentUpdated(el,info,vnode,oldVnode) - 用的较少
  5. unbind(el,info,vnode,oldVnode) - 类似 destroyed

• directives 指令的作用

  1. 主要用于 DOM 操作
     • Vue 示例/组件用于数据绑定、事件监听、DOM 更新
     • Vue 指令主要目的就是原生 DOM 操作
  2. 减少重复
     • 如果某个 DOM 操作经常被使用，就可以封装为指令
     • 如果某个 DOM 操作比较复杂，也可以封装为指令

2、mixins 混入 - 就是复制

• 目的：减少重复
• 类比
  • directives 的作用是减少 DOM 操作的重复
  • mixins 的作用是减少 data、methods、钩子的重复
• mixins 技巧
  • 选项智能合并
  • Vue.mixin（不推荐使用）
• 语法：

import log from '../mixins/log.js'
export default {
    ...
    mixins:[log],
}

3、extends 继承

• 目的：减少重复
  • 与 mixins 同样的需求
  • 不想要每次都写一个 mixins
  • 可以使用 Vue.extend 或 options.extends
  • extends 是比 mixins 更抽象一点的封装
• myVue.js

const myVue = Vue.extend({
    data(){return {name:'',time:undefined} },
    created(){...},
    beforeDestroy(){...},
})
extend default myVue

• child1.vue

import myVue from './myVue.js'
export default{
    ...
    extends:myVue,
}

4、provide 和 inject - 提供和注入

• 作用：大范围的 data 和 method 等共用
• 注意：不要直接传 themeName ，themeName 是一个字符串，复制给 provide 的
• 传引用可以吗？可以，但是不推荐，容易失控。
• App.vue：

export default { 
    data(){
        return{
            themeName: "blue",
        }
    },  
    provide(){
        return {
            themeName:this.themeName,
            changeThemeName:this.changeThemeName,
        }
    },
    methods:{
        changeThemeName(){...}
    },
}

• ChangeThemeButton.vue：

export default {
    inject:['themeName','changeThemeName','changeFont'],
    methods:{...}
}