一、什么时候需要使用指令
当我们的methods中存在操作DOM/BOM的逻辑的时候,就该思考是否可以抽象成一个自定义指令。
二、Vue 自定义指令有全局注册和局部注册两种方式
全局注册:在main.js中全局引入,用Vue.use()使用指令;
import DirectivesAll from '@/directives/index'
Vue.use(DirectivesAll)
局部注册:Vue.directive 在注册局部指令时,是通过在组件 options 选项中设置 directives 属性。
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
三、指令的生命周期
1)bind 第一次绑定到DOM元素上的时候触发;
2)update bind完成之后立刻触发,以后每当参数更新的时候都会触发;
3)unbind 解除和DOM元素的绑定时触发 。
四、指令原理(五个钩子函数)
1)bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置;
2)inserted:inserted是在DOM插入父节点之后才触发的(仅保证父节点存在,但不一定已被插入文档中),而处理inserted是在DOM插入之前,所以这里不可能直接触发,只能是先保存起来,等到节点被插入之后再触发(分为收集和执行);
3)update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
4)componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。这个钩子和 inserted 差不多,只是执行的流程不一样。componentUpdated 钩子是更新一个节点就马上执行的,更新一个节点的意思是包括其内部的子节点的。
5)unbind:只调用一次,指令与元素解绑时调用。
注:
inserted和componentUpdated差异:
inserted是所有节点,包括其子节点全部插入后,统一执行inserted钩子;
componentUpdated钩子是更新一个节点就马上执行的;
五、实际使用
实现列表懒加载:
1)定义一个指令
Vue.directive('divLazy', {
bind(el, binding) {
el.handler = function() {
const condition = this.scrollHeight - this.scrollTop <= this.clientHeight
if (condition) {
binding.value()
}
}
el.addEventListener('scroll', el.handler)
},
unbind(el, binding) {
el.removeEventListener('scroll', el.handler)
}
})
2)使用指令
<div v-divLazy="lazyFunc" class="scrollBox">
<div v-for="(item, index) in groupList" :key="index" class="groupItem">
......
</div>
</div>
// 懒加载
lazyFunc() {
if (this.groupList?.length !== this.groupLength) {
this.page++
let obj = {
page: this.page,
page_size: this.page_size
}
groupManagement.getGroupList(obj).then((res) => {
if (res?.group_infos?.length > 0) {
const arr = JSON.parse(JSON.stringify(res.group_infos))
this.groupList.push(...arr)
}
})
}
},
人生海海,码途徐徐,在每一段经历中,留下成长的印记,爱自己爱生活爱思考!