[Vue的面试题]关于指令

1. 如何自定义指令

全局自定义指令：

首先我们得在main.js里面编写我们需要自定义的指令，这样全局就都可以使用得到这个指令

我们在组件中使用：

运行结果：

局部自定义指令：

只需要在相应的组件创建自定义指令就好了

运行结果：

tip：值得一提的是，我们经常用的都是全局自定义指令，基本上不用局部，因为创建自定义指令的目的就是为了重复高效的在多个组件中使用

自定义指令——钩子函数：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用

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

它们都含有三个参数

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

binding：一个数据对象

vnode：一个虚拟节点

2. v-if和v-for的优先级

在Vue2中，v-for > v-if

在Vue3中，v-if > v-for

因为在源码中，Vue2中是先判断v-for再判断v-if

而Vue3中，则改变了顺序