运维开发网
广告位招商联系QQ:123077622
 
广告位招商联系QQ:123077622

VUE温习:内存泄漏、Vue.$set、key作用与虚拟diff算法

运维开发网 https://www.qedev.com 2020-07-17 20:03 出处:网络 作者:运维开发网整理
一、内存泄漏 1、指令绑定了事件,却没有解绑事件,容易产生内存泄漏。(曾经遇到过的案例) 2、v-if指令产生内存泄漏,比如v-if删除了父级元素,却没有删除父级元素里的dom片段 3、跳转到别的路由,却没有删除产生的dom片段。需要在beforeDestroy()钩子里注销三方插件,销毁定时器等 二、Vue.$set 1、vue不能检测到数组与对象的2种变化:数组长度变化,数组索引修改内容;对象

一、内存泄漏

1、指令绑定了事件,却没有解绑事件,容易产生内存泄漏。(曾经遇到过的案例)

2、v-if指令产生内存泄漏,比如v-if删除了父级元素,却没有删除父级元素里的dom片段

3、跳转到别的路由,却没有删除产生的dom片段。需要在beforeDestroy()钩子里注销三方插件,销毁定时器等

二、Vue.$set

1、vue不能检测到数组与对象的2种变化:数组长度变化,数组索引修改内容;对象属性的添加与删除。

2、Vue.$set(target,key,value):可以动态的给数组、对象添加和修改数据,并更新视图中数据的显示

3、vue在构造函数new Vue()时就通过Object.defineProperty中的getter和setter方法完成对数据的绑定,所以直接通过vm.arr[1] = ‘aa’的方法,无法修改值去触发vue中视图的更新,必须还得通过Object.defineProperty的方法去改变,而Vue.$set()就封装了js底层的Object.defineProperty方法

三、key作用与虚拟diff算法

1、虚拟diff算法假设:

(1)两个相同的组件产生类似的dom结构,不同的组件产生不同的dom结构

(2)同一层级的一组节点可以通过唯一id进行区分

  当页面的数据发生变化时,Diff算法只会比较同一层级的节点:

  如果节点类型不同,直接干掉前面的节点,再创建并插入新的节点,不会再比较这个节点以后的子节点了。

  如果节点类型相同,则会重新设置该节点的属性,从而实现节点的更新。

  当某一层有很多相同的节点时,也就是列表节点时,Diff算法的更新过程默认情况下也是遵循以上原则。所以我们需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。

2、所以key的作用就是高效的更新虚拟dom

扫码领视频副本.gif

0

精彩评论

暂无评论...
验证码 换一张
取 消