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

  • 相关阅读:
    LeetCode "Super Ugly Number" !
    LeetCode "Count of Smaller Number After Self"
    LeetCode "Binary Tree Vertical Order"
    LeetCode "Sparse Matrix Multiplication"
    LeetCode "Minimum Height Tree" !!
    HackerRank "The Indian Job"
    HackerRank "Poisonous Plants"
    HackerRank "Kundu and Tree" !!
    LeetCode "Best Time to Buy and Sell Stock with Cooldown" !
    HackerRank "AND xor OR"
  • 原文地址:https://www.cnblogs.com/goloving/p/11494686.html
Copyright © 2011-2022 走看看