vue2 vs vue3自定义指令

什么是指令?

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

指令的作用是什么呢?

指令中封装了一些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: 指令的前一个值,在beforeUpdate和Updated 中,可以和value是相同的内容。

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

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

  • vnode: Vue 编译生成的虚拟节点
  • prevVNode: Update时的上一个虚拟节点

在Vue 3中钩子函数的生命周期和组件的生命周期类似:

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;
  },
},

你可能感兴趣的