so easy 的 Vue3.0自定义指令（也搜一贼）

前言

前面一篇文章Vue2.0如何实现一个自定义指令（搜一贼）中我们已经对2.0中自定义指令的语法和钩子函数以及钩子函数中的参数进行了梳理，最后还实现了一个非常简单的文本框自动聚焦的小案例，接下来这篇文章我们将梳理一下vue3.0中自定义指令是如何实现的，3.0相较于2.0又发生了哪些变化。

vue3.0自定义指令

其实3.0中自定义指令的语法没有什么太大变化，唯一的变化就是在2.0中是通过Vue.directive()来实现一个全局的自定义指令，而3.0中不再使用Vue了，而是通过函数createApp()来返回一个vue实例app，进而通过app.directive()来实现一个全局的自定义指令。
directive所接受的参数没有变化，依然是name和options。那么在3.0中变化最大的便是options中的钩子函数了。一个包含了完整钩子函数的自定义指令应该是如下这样：

const app = createApp();
app.directive('focus',{created(el,binding,vnode,oldVnode){},beforeMount(el,binding,vnode,oldVnode){},mounted(el,binding,vnode,oldVnode){},beforeUpdate(el,binding,vnode,oldVnode){},updated(el,binding,vnode,oldVnode){},beforeUnmount(el,binding,vnode,oldVnode){},unmounted(el,binding,vnode,oldVnode){}
})

熟悉2.0自定义指令的小伙伴应该都知道，3.0中新增了几个钩子函数，并且钩子函数的名称也跟2.0完全不一样了（即便功能是一样的），下面我们就来逐个分析一下3.0中的每一个钩子函数

钩子函数与参数

created：在绑定元素的attribute或者事件监听器被应用之前调用。比如某元素需要绑定一个click事件，同时该元素还应用了自定义指令，那么在该元素绑定click事件之前便会出发自定义指令的created钩子函数。3.0中新增

beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。类似2.0中的bind

mounted：在绑定元素的父组件被挂载后调用。类似2.0中inserted

beforeUpdate：在更新包含组件的VNode之前调用。3.0中新增

updated：在包含组件的VNode及其子组件的VNode更新后调用。类似2.0中的componentUpdate

beforeUnmount：在卸载绑定元素的父组件之前调用。3.0中新增

unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。类似2.0中的unbind

通过上面的分析和类比我们发现，其实除了3.0中新增的钩子函数，剩下几个函数的功能与作用跟2.0中提供的钩子函数基本是一样的。
而3.0中钩子函数的参数依然还是4个（el, binding, vNode, prevNode），并且与2.0中的以一样的，唯一不同的是第四个参数名称变成了prevNode，其作用还是相同的。2.0中已经对每个参数进行了详细说明，这里就不在赘述了。

3.0自定义指令小案例

最后我们依然实现一个文本框自动聚焦的小案例

const app = createApp();
// 注册一个全局自定义指令 `v-focus`
app.directive('focus',{mounted(el){// 当被绑定的元素挂载到 DOM 中时el.focus(); // 聚焦元素}
});

总结

3.0中的自定义指令是不是依然是搜一贼。本文我们对3.0中自定义指令的语法和钩子函数进行了梳理，同时也结合着2.0中的函数做了一下简单对比，最终发现其实还是大同小异，只是名称发生了一些明显的变化。最后仍然以一个简单的不能再简单的文本框聚焦小案例结尾。
本文就介绍到这里，如果小伙伴们喜欢，欢迎点赞留言加关注哦。

so easy 的 Vue3.0自定义指令（也搜一贼）相关推荐

html任务3 模拟滚动条,vue3系列：vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件...
/** * @Desc Vue3.0虚拟滚动条组件V3Scroll * @Time andy by 2021-01 * @About Q:282310962 wx:xy190310*/ props: ...
【Vue3.0】Vue3.0简介-指令-过滤器-案例D2.0
[Vue3.0]Vue3.0简介-指令-过滤器-案例一.Vue3.0简介 1.1.vue3.0与vue2.0对比 vue2.0中绝大多数的API与特性,在vue3.0中同样支持.但是vue3.0中新 ...
手把手教你在 Vue3 中自定义指令
TienChin 项目前端是 Vue3,前端有这样的一个需求:有一些前端页面上的按钮要根据用户的权限来决定是否展示出来,如果用户具备相应的权限,那么就展示对应的按钮:如果用户不具备对应的权限,那么按钮 ...
手把手带你写一个 Vue3 的自定义指令
背景众所周知,Vue.js 的核心思想是数据驱动 + 组件化,通常我们开发页面的过程就是在编写一些组件,并且通过修改数据的方式来驱动组件的重新渲染.在这个过程中,我们不需要去手动操作 DOM. 然而 ...
Vue3：自定义指令directive
一.vue2自定义指令生命周期 bind: function () {}, inserted: function () {}, update: function () {}, componentUpd ...
vue3的自定义指令 v-focus写法
会vue2的不会vue3,上次查找之后,记录一下, <template><inputv-focustype="text"/> </template&g ...
vue3的自定义指令directives
一.什么是自定义指令我们已经熟悉Vue内置的一系列指令 ,比如 v-model, v-show, v-if, v-for等等,自定义指令从命名上看主要区别于Vue自带的内置指令,我们可以创建自己想要 ...
Vue3.0 自定义v-model:xxx
父组件 <ChildComponent v-model:title="pageTitle" /> 子组件 export default {props: {title: ...
Vue3.0实现原生高度可自定义菜单组件vue3-menus
vue3-menus Vue3.0 自定义右键菜单 Vue3.0 原生实现完全自定义右键菜单组件, 零依赖,可根据可视区域自动调节显示位置,可支持插槽完全重写每一项菜单项目地址 GitHub Git ...
Vue3 学习笔记 —— 破坏式更新、自定义指令 directive
目录 1. 什么叫破坏式更新? 2. Vue3 中的自定义指令 2.1 自定义指令的生命周期 2.1.1 Vue2 Vs Vue3 的自定义指令生命周期 2.1.2 自定义指令的生命周期中,接收的参数 ...

so easy 的 Vue3.0自定义指令（也搜一贼）

前言

vue3.0自定义指令

钩子函数与参数

3.0自定义指令小案例

总结

so easy 的 Vue3.0自定义指令（也搜一贼）相关推荐

最新文章

热门文章