Vue 基础(四):自定义指令与生命周期
自定义指令
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。在vue中使用directive来创建自定义指令
钩子函数
指令定义函数提供了几个钩子函数(可选):
这些钩子函数中的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 }。
示例
简写
如果不需要使用钩子函数,也能使用简写形式
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 实例所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。

