VUE构造选项 - 3 - 指令 / 混入 / 继承 / 提供 / 注入

1. directives 指令

指令主要用于DOM操作，数据绑定、事件监听、DOM更新等，通过将常用或复杂的DOM操作封装为指令，来简化使用。

来尝试自定义一个指令

第一种方式：全局声明
```
Vue.directive('x',{
    inserted: function(el){
        el.addEventListener('click',()=>{console.log('x')})
    }
})
```
进行全局声明后，可以在任何一个组件里面使用 v-x 进行监听它的 click 事件。

第二种方式：局部声明

new Vue({
    directives:{
        'x':{
            inserted: function(el){
                el.addEventListener('click',()=>{console.log('x')})
            }
        }
    }
})

进行局部声明后，v-x 仅能在该组件中使用。

钩子函数
- bind: 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
- update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
- componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
- unbind：只调用一次，指令与元素解绑时调用
- bind类似于created
- inserted类似于mounted
- update类似于updated
- unbind类似于destroyed
以上五个函数均接收参数 *(el, info ,vnode oldVnode),详见文档

自制一个简化版的v-on2指令

new Vue({
	directives:{
    	on2:{
        	inserted(el, info){
            	el.addEventListener(info.arg, info.value)
            },
            unbind(el, info){
            	el.removeEventListener(infro.arg)
            }
        }
    }
})

2. mixins 混入

mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中。

log.js

var log = {
	data(){
    	name: undefined
    },
    created(){
    	onsole.log('created in log')
    }
}
export default log

Demo.vue

<script>
import log from '../log.js'
export default{
	data(){
    	name: 'Demo'
    },
    created(){
    	console.log('created in Demo')
    },
    mixins:[log] //混入
}
</script>

在Demo中加入混入对象log，同名选项将会进行合并，如name会合并成'Demo'。合并规则见文档

而同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。以上代码Demo组件的created运行结果将会是：

created in log
created in Demo

另有全局混入，但并不推荐使用

对比

directives的作用是减少DOM操作的重复
mixins的作用是减少data、methods、钩子等的而重复。

3. extends 继承

extends允许声明扩展另一个组件 (可以是一个简单的选项对象或构造函数)，而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。类似于mixins。

var CompA = { ... }

// 在没有调用 `Vue.extend` 时候继承 CompA
var CompB = {
  extends: CompA,
  ...
}

使用Vue.extend 创建一个“子类”。参数是一个包含组件选项的对象。

const MyVue = Vue.extend({
	data(){ return {name:'',time:undefined} },
	created(){
		if(!this.name){console.error('no name!')}
		this.time = new Date()
	},
        beforeDestroy(){
            const duration = (new Date()) - this.time
            console.log(`${this.name} ${duration}`)
            }
        })

之后可使用new MyVue(options)

4. provide / inject

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。

// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

可以实现大范围的data和method等共用

provide传引用，不推荐，因为容易失控，难以确认是被哪一个后代所修改。

小结

directives 指令
- 全局使用： Vue.directive('x',{...})
- 局部使用：options.directives
- 作用是减少DOM操作相关的重复代码
mixins 混入全局使用：
- Vue.mixin({...})
- 局部使用：options.mixins:[mixins1,mixins2]
- 用于减少options里面的重复。
extends 继承\扩展
- 全局使用：Vue.extend({...})
- 局部使用：opyions.extends:{...}
- 作用与mixins类似，只是形式不同。
provide\inject提供和注入
- 祖先提供东西，后代注入东西。
- 作用是大范围、隔N代共享信息。