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

一、内存泄漏

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