• 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

  • 相关阅读:
    Java并发编程:线程池的使用
    AlarmManager与PendingIntent
    ConnectivityManager与检查网络连接的使用
    IntentService的使用
    Service(Local Service)简介
    Looper、Hander、HandlerThread
    XML_PULL解析
    android AsyncTask 的使用(转载)
    android 连接网络的简单实例
    xml drawable
  • 原文地址:https://www.cnblogs.com/goloving/p/11494686.html
Copyright © 2020-2023  润新知