inserted 是钩子函数,在绑定元素插入父节点时执行。
在 vue3 中,vue 实例通过createApp 创建,所以全局自定义指令的挂载方式也改变了, directive 被挂载到 app上。
实例2:Vue3 全局自定义指令
//全局自定义指令
app.directive(‘focus’,{
mounted(el){
el.focus()
}
})
//组件使用
1.2、局部自定义指令
在组件内部,使用 directives 引入的叫做局部自定义指令。Vue2 和 Vue3 的自定义指令引入是一模一样的。
实例3:局部自定义指令
二、自定义指令中的生命周期钩子函数
一个指令定义对象可以提供如下几个钩子函数(都是可选的,根据需要引入)
-
created :绑定元素属性或事件监听器被应用之前调用。该指令需要附加需要在普通的 v-on 事件监听器前调用的事件监听器时,这很有用。
-
beforeMounted :当指令第一次绑定到元素并且在挂载父组件之前执行。
-
mounted :绑定元素的父组件被挂载之后调用。
-
beforeUpdate :在更新包含组件的 VNode 之前调用。
-
updated :在包含组件的 VNode 及其子组件的 VNode 更新后调用。
-
beforeUnmounted :在卸载绑定元素的父组件之前调用
-
unmounted :