标签：自定义 directive DOM 钩子 指令 Vue2 Vue3

Vue2.x

用法

• 全局注册
  • Vue.directive( 指令名, { 自定义指令生命周期 } )
• 局部注册
  • directives: { 指令名, { 自定义指令生命周期 } }
• 使用
  • v-指令名: 属性名.修饰符=“value值”

钩子函数

1. bind - 自定义指令绑定到 DOM 后调用. 只调用一次, 注意: 只是加入进了DOM, 但是渲染没有完成

2. inserted - 自定义指令所在DOM, 插入到父 DOM 后调用, 渲染已完成(最最重要)

3. update - 元素更新, 但子元素尚未更新, 将调用此钩子( 自定义指令所在组件更新时执行, 但是不保证更新完成 ) —> 和自定义所在组件有关

4. componentUpdated - 组件和子级更新后执行( 自定义指令所在组件更新完成, 且子组件也完成更新 ),

   —> 和自定义所在组件有关

5. unbind - 解绑(销毁) .( 自定义指令所在 DOM 销毁时执行 ). 只调用一次

钩子函数的参数

注意: 自定义指令中, 都不能直接使用this

1. el: 当前指令所在的dom元素。
2. binding: 是一个对象, 表示当前指令上的属性、修饰符、value值等信息。只有value最重要, 常用
   1. arg：String, 属性名 。例如 v-my-directive:foo 中，属性名为 “foo”。
   2. modifiers：Object, 包含所有修饰符的一个对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
   3. name：String, 指令名，不包括 v- 前缀。
   4. rawName, String, 完整指令名，例如 v-my-directive:foo.bar=“1 + 1” 中, 完整指令名就是 v-my-directive:foo.bar=“1 + 1”。
   5. value：Any, 指令绑定的当前值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。(最最重要)
   6. expression：String, 解析的哪一个值、表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
   7. oldValue：Any, 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
   8. oldArg：Any, 指令属性名的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
3. vnode：当前节点信息, 可以获取, 当前指令所在组件的实例
   1. vnode.context - 当前指令所在的实例对象
4. oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

Vue3.x

用法

• 用法和 Vue2.x 一样

• 全局注册

  • Vue.directive( 指令名, { 自定义指令生命周期 } )

• 局部注册

  • directives: { 指令名, { 自定义指令生命周期 } }

• 使用

  • v-指令名: 属性名.修饰符=“value值”

.

以插件的形式, 进行全局注册

钩子函数

较 Vue2.x 相比, 钩子函数有变化, 最终的 API 如下：

const MyDirective = {
  created(el, binding, vnode, prevVnode) {}, // 新增
  beforeMount() {},
  mounted() {},
  beforeUpdate() {}, // 新增
  updated() {},
  beforeUnmount() {}, // 新增
  unmounted() {}
}

1. created - 自定义指令所在组件, 创建后
2. beforeMount - 就是Vue2.x中的 bind, 自定义指令绑定到 DOM 后调用. 只调用一次, 注意: 只是加入进了DOM, 但是渲染没有完成
3. mounted - 就是Vue2.x中的 inserted, 自定义指令所在DOM, 插入到父 DOM 后调用, 渲染已完成(最最重要)
4. beforeUpdate - 自定义指令所在 DOM, 更新之前调用
5. updated - 就是Vue2.x中的 componentUpdated
6. beforeUnmount - 销毁前
7. unmounted - 销毁后

标签：自定义,directive,DOM,钩子,指令,Vue2,Vue3
来源： https://blog.csdn.net/weixin_46873254/article/details/120404197

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。