3、钩子函数
自定义指令也像组件那样存在钩子函数:
- bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
- inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)
- update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
- componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用
- unbind:只调用一次,指令与元素解绑时调用
所有的钩子函数的参数都有以下:
-
el:指令所绑定的元素,可以用来直接操作 DOM
-
binding:一个对象,包含以下 property:
name
:指令名,不包括 v- 前缀。value
:指令的绑定值,例如:v-my-directive=“1 + 1” 中,绑定值为 2。oldValue
:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。expression
:字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中,表达式为 “1 + 1”。arg
:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 “foo”。modifiers
:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }vnode
:Vue 编译生成的虚拟节点oldVnode
:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用 -
除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行
4、函数简写
大多数情况下,可能想在bind和update钩子上做重复动作,并且不想关心其它的钩子函数。可以这样写:
<div v-demo="{ color: 'white', text: 'hello!' }"></div>
Vue.directive('demo', function (el, binding) {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})
生命周期函数(钩子函数)
已经学过的钩子函数:window.onload()=>{ } 满足钩子函数特征:页面一旦加载,系统会自动调用,不许我们自动调用这个函数。
当前vm实例在创建的过程中,会去调用的函数:
directives:{},
//钩子函数: 生命周期函数 (c语言中有一类系统回调的函数然后执行业务 叫做钩子)
//在某一种条件成立的时刻 系统会去调用的vue中设定的函数 这些函数都叫做:生命周期函数
//当前vm实例在创建到销毁的过程中 会去调用的函数:
beforeCreate(){
//1、能否网络请求?
//能做网络请求,因为这是函数在运行时XMLHttpRequest是可以访问并且去做AJAX请求的
//2、能否网络请求数据 然后设置到数据源中?
//不能设置到数据源中,因为这个钩子中 this还在创建
//3、这个在项目中干什么?
//只要不是用于页面渲染
//预加载图片: 网页中同源加载的优化(同一个页面中img script等等 src属性去请求资源)
new Image().src="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1662397200&t=873657ddc05e966309998f18814a9e54"
//预加载工具
//第三方工具的加载
//这个函数在运行时 vm正在创建中:劫持data,methods 也就是 this对象中还不能访问到数据
console.log("beforeCreate",this.msg,this.change1,this)
},
created(){
//能否网络请求?
//能做网络请求,因为这是函数在运行时XMLHttpRequest是可以访问并且去做AJAX请求的
//能否网络请求数据 然后设置到数据源中?
//可以设置到数据源中,因为这个钩子中 this已经创建完毕了
//这个在项目中干什么?
//请求首屏数据
//vm对象已经创建完毕了,但是它(vm)还没有挂载到DOM树中
//这个函数可以操作this对象了 但是无法操作DOM
console.log("created",this.msg,this.change1)
},
beforeMount(){
//渲染前的操作
//vm对象已经创建完毕了,在挂载之前触发的钩子
//这个函数可以操作this对象了 但是无法操作DOM
console.log("beforeMount")
},
mounted(){
//vm已经挂载到页面了
//请求首屏数据,请求时页面已经出来了
console.log("mounted")
},
beforeUpdate(){
//这两个钩子中 不能网络请求新数据 去更新数据源
//会导致死循环
//数据源已经更新了,页面重新渲染前(并不是数据更新前) 触发的钩子
console.log("beforeUpdate",this.url)
},
updated(){
//页面已经重新渲染了触发的钩子
console.log("updated")
},
beforeDestroy(){
//vm对象销毁之前触发的钩子,this还在 可以做最后的操作
//保存用户的行为配置文件:播放器的进度 等等
console.log("beforeDestroy",this.msg)
},
destroyed(){
//后面在webpack环境下操作 无法操作this
//往往把当前组件中计时器清除了 可以把body的滚动条滚到顶部
console.log("destroyed",this.msg)
}
}
学完要知道的面试题:
-
什么是生命周期函数?
vue组件对象在创建到销毁的过程中,在某一种条件成立的时刻 系统会去调用的vue中设定的函数 这些函数都叫做:生命周期函数
-
vue的生命周期函数有哪些?
-
普遍的答法:有8个创建前后,挂载前后,更新前后,销毁前后;
-
高级的答法:组件的有8个(创建前后,挂载前后,更新前后,销毁前后);自定义指令也有5个;动态组件有2个;路由(组件有3个,全局有2个,独享有1个)
-
-
为什么要设计生命周期函数?
- 把整个运行期间的业务区分的很明显
- 能够更好的帮助我们把产品的业务逻辑实现了
- 更有利于我们维护产品 和 修改需求
- 能够让我们写出更高质量的产品的代码
-
页面首次加载过程中,会依次触发哪些钩子
beforeCreate,created,beforeMount,mounted
-
this.$el 是什么?它在哪些钩子中才能访问?
它代表了当前组件的真实DOM,要在mounted之后才有
-
Vue 实例的 data 属性,在哪些钩子中能访问
created beforeMount mounted beforeUpdate updated beforeDestroy
-
为什么不要在更新钩子中做页面的数据请求?
会导致死循环 react有一个shoudComponentUpdate可以自己控制 但是vue没有
-
你用beforeCreate做过什么业务?
这个钩子中可以做网络请求 但是vm没有构建完毕,此时数据方法等等的劫持还没有完成,不能操作this,因此可以做预加载.
-
.VM和DOM之间的关系?
1、VM是JS模拟出来的跟DOM结构很像的一种对象结构VNode. 它通过底层的render函数渲染到页面上,让页面DOM跟虚拟VNode关联映射;
2、 如果VM的数据源发生变化,会让内存中生成新的VNode 新的VNode会和旧的VNode作比较然后更新,这个过程就是DIFF算法;
-
讲一讲DIFF算法?
什么是DIFF
用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文 档当中
当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff),记录两棵树差异
把第二棵树所记录的差异应用到第一棵树所构建的真正的DOM树上(patch),视图就更新了
DIFF算法的过程
当数据发生改变时,订阅者watcher就会调用patch给真实的DOM打补丁
通过sameVnode进行判断,相同则调用patchVnode方法
patchVnode做了以下操作:
找到对应的真实dom,称为el
如果都有都有文本节点且不相等,将el文本节点设置为Vnode的文本节点
如果oldVnode有子节点而VNode没有,则删除el子节点
如果oldVnode没有子节点而VNode有,则将VNode的子节点真实化后添加到el
如果两者都有子节点,则执行updateChildren函数比较子节点
updateChildren主要做了以下操作:
设置新旧VNode的头尾指针
新旧头尾指针进行比较,循环向中间靠拢,根据情况调用patchVnode进行patch重复流程、调用createElem创建一个新节点,从哈希表寻找 key一致的VNode 节点再分情况操作