Vue指令钩子函数

2022-05-06 04:06| 来源: 网络整理| 查看: 265

Vue指令上篇文章有讲过了，现在分析Vue指令钩子函数。

自定义指令

全局定义：Vue.directive( ' 自定义指令名 ' , { } )；

参数一是指令的名字，定义时指令前不需要加 v- 前缀，但调用的时候必须加上这个前缀；参数二是一个对象，在这对象身上有一些指令相关的函数，这些函数可以在特定阶段执行相关的操作，叫钩子函数。

钩子函数 //注册一个全局自定义指令 Vue.directive('demo', { // 指令第一次绑定到元素时，会立即执行这个bind函数，只执行一次 bind: function () { console.log('bind'); }, // inserted表示元素插入到DOM中时，会执行inserted函数，只触发一次。 inserted: function (el) { console.log('inserted'); }, // 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。 update:function(){ console.log('updated'); }, // 被绑定元素所在模板完成一次更新周期时调用。 componentUpdated: function () { console.log('componentUpdated'); }, // 只调用一次，指令与元素解绑时调用 unbind: function () { console.log('unbind') } })

所以钩子函数的作用：

bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted：inserted表示元素插入到DOM中时，会执行inserted函数，只触发一次。 update：被绑定元素所在的模板更新时调用，而不论绑定值是否变化。 componentUpdated：被绑定元素所在模板完成一次更新周期时调用。 unbind：只调用一次，指令与元素解绑时调用。执行顺序

代码：

import Vue from 'vue' Vue.directive('demo', { bind: function () { console.log('bind') }, inserted: function (el) { console.log('inserted') }, update: function () { console.log('updated') }, componentUpdated: function () { console.log('componentUpdated') }, unbind: function () { console.log('unbind') } }) export default { data () { return { msg: 'hello' } } }

执行效果图：

由此可知，bind比inserted先执行，当触发输入框，改变数据时，看其执行结果：

所以执行顺序是：bind ==> inserted ==> updated ==> componentUpdated

嘿嘿，unbind我也不清楚怎么描述。

参数

钩子函数中是可以带参数的。所带的参数也是有规定的，所以来分析参数。

el：所绑定的元素，可直接操作dom binding：可获取使用了此指令的绑定值有多个属性 name：指令名，不包括v-前缀 value：指令的绑定值，如v-demo="1+1"中，绑定值为2 oldValue：指令绑定的前一个值，仅在update和componentUpdated中可用 expression：字符串形式的指令表达式,例如v-demo = "1 + 1"中，表达式为"1 + 1" argument：传给指令的参数，可选。例如v-demo:message中，参数为"message" modifiers：一个包含修饰符的对象。例如v-demo.foo.bar中，修饰符对象为{foo:true, bar:true} vnode: 编译生成的虚拟节点 oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。例子

拿钩子函数bind做例子：

import Vue from 'vue' Vue.directive('demo', { bind: function (el, binding, vnode) { console.log(el) console.log(binding) console.log(vnode) } }) export default { name: 'Mixin', data () { return { msg: 'hello' } } }

效果图：

【本文地址】

公司简介

联系我们