zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    干货 | 玩转云文件存储——利用CFS实现web应用的共享访问
    干货 | 4步带你完成私有云盘搭建
    是我们控制着技术,还是技术控制着我们?
    如何辨别开发者等级?
    云托管,边缘物理计算&托管物理计算,你所需要了解的……
    干货 | 调用AI api 实现网页文字朗读
    容器技术的未来——京东云技术专访
    隐藏的历史-是什么成就了今天的硅谷?
    ffmpeg windows下编译安装
    比较和打补丁工具
  • 原文地址:https://www.cnblogs.com/goloving/p/11494686.html
Copyright © 2011-2022 走看看