Vue3新特性学习-自定义指令-非兼容变更

xn213
500 阅读2分钟

这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战

前言

系列更文主要记录积累学习 Vue3实练 及源码解读. 之前有几篇文章有作 Vue3的一些变更学习总结的开始, 请直接转到文末Vue3 学习总结目录: ; 本文继续记录 Vue3.x 新特性的学习: Vue3 的自定义指令(非兼容)

Vue3.x 新特性学习- Vue3 的自定义指令 变更

  • 重命名了指令的钩子函数，以更好地与组件的生命周期保持一致;

  • 另外 expression 字符串不再作为 binding 对象的一部分被传入。

Vue2.x 自定义指令

先来看一下在 Vue2.x 中的自定义指令的一些钩子函数:

  • bind - 指令绑定到元素后调用。只调用一次。
  • inserted - 元素插入父 DOM 后调用。
  • update - 当元素更新，但子元素尚未更新时，将调用此钩子。
  • componentUpdated - 一旦组件和子级被更新，就会调用这个钩子。
  • unbind - 一旦指令被移除，就会调用这个钩子。也只调用一次。

使用 Vue2 写一个简单的自定义指令

// 很简单的一个栗子: 通过 binding 获取值, 对 DOM 进行修改其样式: 颜色为绑定传送的值

Vue.directive('changecolor', {
  bind(el, binding, vnode) {
    el.style.color = binding.value
  },
})

/// 使用这个自定义指令

<div v-changecolor="red">通过自定义指令改变该文本的字体颜色, 这里为传递的 红色 red</div>

Vue3 中自定义指令钩子函数

现在自定义指令的生命周期钩子与组件本身保持一致， 这方便了我们的记忆

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

使用对比

const app = Vue.createApp({})

app.directive('changecolor', {
  beforeMount(el, binding, vnode) {
    el.style.color = binding.value
  },
})

Vue3 学习实战的几篇小总结:

参考文档:

源码 & 文档

avatar
文章
阅读
粉丝