当前位置：首页 > news >正文

Vue基础（4）

news 2026/2/8 22:28:58

自定义指令

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。在vue中使用directive来创建自定义指令

钩子函数

指令定义函数提供了几个钩子函数（可选）：

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次，指令与元素解绑时调用。

这些钩子函数中的this并没有被维护成vm，因为所绑定的元素，以及参数在钩子函数中都能获取到。

钩子函数参数

钩子函数的参数有：

el: 指令所绑定的元素，可以用来直接操作 DOM 。
binding: 一个对象，包含以下属性：
- name: 指令名，不包括 v- 前缀。
- value: 指令的绑定值，例如： v-my-directive="1 + 1", value 的值是 2。
- oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
- expression: 绑定值的表达式或变量名。例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
- arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
- modifiers: 一个包含修饰符的对象。例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。

示例

<div id="app"  v-runoob:hello.a.b="message">
</div><script>
Vue.directive('runoob', {bind: function (el, binding, vnode) {var s = JSON.stringifyel.innerHTML ='name: '       + s(binding.name) + '<br>' +'value: '      + s(binding.value) + '<br>' +'expression: ' + s(binding.expression) + '<br>' +'argument: '   + s(binding.arg) + '<br>' +'modifiers: '  + s(binding.modifiers) + '<br>' +'vnode keys: ' + Object.keys(vnode).join(', ')}
})
new Vue({el: '#app',data: {message: '菜鸟教程!'}
})
</script>

简写

如果不需要使用钩子函数，也能使用简写形式

Vue.directive('runoob', function (el, binding) {// 设置指令的背景颜色el.style.backgroundColor = binding.value.color
})

用于只需要处理指令的inserted或bind钩子函数的简单场景。

生命周期

定义

Vue的生命周期就是实例从创建到销毁的一个过程，即从创建、初始化数据、编译模板、挂载Dom->渲染、更新->渲染，卸载等一系列的过程。

Vue的生命周期分为八个阶段

（1）beforeCreate

在实例初始化(new Vue())后执行，此时的数据监听和事件绑定机制都未完成，获取不到DOM节点。

（2）created

这个阶段vue实例已经创建，以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。但挂载阶段还没开始，仍然获取不到DOM元素。（在此阶段，初始化完成时的事件写在这里，可以进行异步请求）

（3）beforeMount

在这个阶段完成了DOM的初始化，但仍然无法获取到具体的DOM元素，因为vue还没有进行根节点挂载，但是根节点已经创建完成，下面Vue对DOM的操作将围绕这个根节点进行（beforeMount这个阶段是过渡性的，在项目中使用得比较少）

（4）mounted

在这个阶段，实例已经被挂载完成了，也就是能获取到数据和DOM元素了。

（5）beforeUpdate

在数据发生改变，但页面还没有完成更新时执行的操作，在此阶段视图的数据和DOM元素的数据没有保持同步。（这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器）

（6）updated

这个时候数据发生了改变，并且视图页面也已经完成了更新，因此，该阶段看到的DOM元素的内容是最新内容。

（7）beforeDestroy

此阶段Vue实例仍然完全可用，也就是还能访问到页面的响应式数据和事件。（可以在这里注销eventBus等事件）

（8）destroyed

DOM元素被销毁，此时对应的Vue 实例所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。