directions

作用

主要用于DOM操作

• Vue实例/组件用于数据绑定、事件监听、DOM更新
• Vue指令主要目的就是原生DOM操作 减少重复
• 某个DOM操作经常使用
• 某个DOM操作比较复杂

语法

1. 全局指令 Vue.directive('x',directiveOptions)

2. 局部指令

new Vue({
  ...,
  directions:{
    "x":directiveOptions
  }
})

directiveOptions

五个函数属性

• bind(el,info,vnode,oldValue) -类似created
• inserted(参数同上) -类似mounted
• update(参数同上) -类似updated
• componentUpdated(参数同上) -用的不多
• unbind(参数同上) -类似destroyed

模拟v-on
局部指令，只能在该模块用
new Vue({
  directions:{
    on2:{
      inserted(el,info){
        el.addEventListener(info.arg,info.value)
      } //click 和 hi
      unbind(el,info){
        el.removeEventListener(info.arg,info.value)
      } //清除垃圾
    }
  },
  template:`
    <button v-on2:click="hi">
  `,
  methods:{
    hi(){
      console.log('hi')
    }
  }

})

mixin

作用

• directives是减少DOM操作的重复
• mixins是减少data、methods、钩子的重复

场景描述

• 每个组件上添加name和time
• 在created、destroyed时，打出提示，并报出存活事件

步骤

• 创建mixin文件内对象xxx{}倒出
• 在每个组件上minxins:[xxx]

智能合并

• 数据对象发生冲突时，组件的数据优先
• 钩子函数会合并到一个数组中,混入对象的钩子在组件自身钩子前调用
• 值为对象的选项，如methods、components和directives，将被合并为同一个对象。当存在冲突的键名时，组件选项优先

vue.mixin 全局声明不推荐使用

extends

• extends是比mixins更抽象一点的封装
• 如果嫌小写5次minxins麻烦，可以考虑extends一次（实际工作中很少用到）

provide和inject

父组件provide，子组件inject

• 作用:大范围的data和method等共用
• 注意：可以传引用，但是不推荐，容易失控