vue3.0自定义指令（drectives)知识点总结
在大多数情况下，你都可以操作数据来修改视图，或者反之。但是还是避免不了偶尔要操作原生DOM，这时候，你就能用到自定义指令。
举个例子，你想让页面的文本框自动聚焦，在没有学习自定义指令的时候，我们可能会这么做。
constapp=Vue.createApp({
mounted(){
this.$refs.input.focus();
},
template:`
在mounted钩子函数里，通过$refs获取需要聚焦的DOM元素，然后调用focus方法完成自动聚焦的功能。
基本使用
上面做法已经实现了我们需要的功能，但是假如说我们有多个组件都需要这个功能，那我们只能把这段代码复制过去，重新实现逻辑。我们下面看下如果使用自定义指令，应该怎么做。
constapp=Vue.createApp({
//通过v-[自定义指令名称]绑定自定义指令
template:`
如上，我们定义了一个全局自定义指令focus，并通过v-focus绑定到需要聚焦的input元素上。如果，其他组件或模块也需要聚焦功能，只要简单的绑定此指令即可。
自定义指令的钩子函数
我们在上面定义指令的时候，会发现其中包含了mounted钩子函数，指令还提供了如下钩子函数，我们用代码的形式来给大家列出来。
app.directive('directiveName',{
//指令绑定元素挂载前
beforeMount(el){},
//指令绑定元素挂载后
mounted(el,binding){},
//指令绑定元素因为数据修改触发修改前
beforeUpdate(el){},
//指令绑定元素因为数据修改触发修改后
updated(el){},
//指令绑定元素销毁前
beforeUnmount(el){},
//指令绑定元素销毁后
unmounted(el){},
});
效果就不一一列举了，有兴趣大家可以尝试下分别触发这些钩子函数。指令钩子函数大部分与组件很类似，大家可以对比着来看。
动态指令参数
下面，我们再来看一个例子。
constapp=Vue.createApp({
template:`我们在div元素上绑定absTop指令，div元素本身定位是absolute，指令执行让绑定元素的top为100px。这时候，我想在绑定指令的时候能够传一个参数，使得元素的top值可以根据参数来改变。代码如下：
constapp=Vue.createApp({
data(){return{num:100}},
template:`元素可以通过v-directive="value"传入动态参数，指令通过钩子函数的第二个参数binding.value来接收参数。
如果其他元素可能不是修改top的值，有可能是left、right或者bottom，那么指令可以动态指定吗？其实也是可以做到的。首先，我们修改模板为：