什么是指令？

在vue中提供了一些对于页面 + 数据的更为方便的输出，这些操作就叫做指令，以 v-xxx 表示类似于html页面中的属性 <div v-xxx ></div>

指令的作用是什么呢？

指令中封装了一些DOM行为，结合属性作为一个暗号，暗号有对应的值，框架会进行相关DOM操作的绑定。

vue中常用的v-指令有哪些呢？

1. v-text 元素的innerText属性.必须是双标签

2. v-html 元素的innerHTML

3. v-if 判断是否插入这个元素

4.v-else-if

5. v-else

6. v-show 隐藏元素，如果确定要隐藏，会给元素的style加上display：none

7. v-model 对于输入框实现数据的双向绑定

自定义指令中传递的三个参数

*el：指令所绑定的元素，可以用来直接操作DOM。

*binding： 一个对象，包含指令的很多信息。

*vnode： Vue编译生成的虚拟节点。

自定义指令的生命周期

自定义指令有五个生命周期（也叫钩子函数），分别是

bind、inserted、update、componentUpdated、unbind

1.bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始换动作。

2.inserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。

3.update：被绑定与元素所在的模板更新时调用，而无论绑定值是否变换。通过比较更新前后的绑定值，可以忽略不必要的模板更新。

4.componentUpdated：被绑定元素所在模板完成一次更新周期时调用。

5.unbind：只调用一次，指令与元素解绑时调用。

bind:()=>{//被绑定
    console.log('1 - bind');
},

inserted:()=>{//绑定到节点
    console.log('2 - inserted');
},

update:()=>{//组件更新
    console.log('3 - update');
},

componentUpdated:()=>{//组件更新完成
    console.log('4 - componentUpdated');
},

unbind:()=>{//解绑
    console.log('5 - bind');
}

总结：

* 自定义指令的命名规则是什么？

* 自定义指令的生命周期（钩子函数）有哪些？什么时候会被调用？

* 钩子函数的参数有哪些？

Vue3 自定义指令的变化

每一个钩子函数中，参数的变化：

* el：指令绑定的元素，可以用来直接操作DOM

* binding：数据对象，包含以下属性

1. instance：当前组件的实例，一般推荐指令和组件无关，如果有需要使用组件上下文ViewModel，可以从这里获取

2.value：指令的值

3.oldValue：指令的前一个值，在beforUpdate和Updated中，可以和value是相同的内容。

4.arg：传给指令的参数，例如v-on：click中的click。

5. modifiers：包含修饰符的对象。例如v-on.stop：click可以获取到一个（stop：true）的对象

* vnode：Vue 编译生成的虚拟节点

* prevVNode：Update时的上一个虚拟节点

在Vue3中钩子函数的生命周期和组件的生命周期类似：

created - 元素创建后，但是属性和事件还没有生效时调用。

beforeMount- 仅调用一次，当指令第一次绑定元素的时候。

mounted- 元素被插入父元素时调用.

beforeUpdate：在元素自己更新之前调用

updated- 元素或者子元素更新之后调用.

beforeUnmount：元素卸载前调用.

unmounted - 当指令卸载后调用，仅调用一次

全局自定义指令的写法：

let app = createApp(App)
app.directive('highlight', {
  beforeMount(el, binding, vnode) {
    el.style.background = binding.value
   }
})

// 改变背景色

局部自定义指令的写法：

directives: {
highlight: {
  beforeMount(el, binding, vnode) {
     el.style.background = binding.value;
  },
},