zoukankan      html  css  js  c++  java
  • 【每日一题】【vue2源码学习】对VUE响应式数据的理解

    数组和对象类型当值变化时如何劫持到?

    对象类型数据的劫持

    是内部通过defineReactive方法。使用Object.defineProperty将属性进行劫持(只会劫持已经存在的属性),多层对象是通过递归来实现的劫持。(详细还要看Object.defineProperty实现观察者模式的代码思路)。而到了vue3.x中时使用Proxy来实现响应式数据的。proxy提升性能但是兼容性不太好。

    数组类型数据的劫持

    则是通过重写数组的方法来实现的。这是因为因为defineProperty会依次的给对象的属性增加get和set方法来进行监听。但数组长度不定且可能数值项很多。每一项都监听性能特别差。所以不使用defineProperty的方式实现监听。(具体重写了哪些方法以及怎么重写的见后期第2题)

    内部依赖收集是怎么做到的?

    每个属性都拥有自己的dep属性,存放他所依赖的watcher,当属性变化后会通知自己对应的watcher去更新(其实后边每个对象类型自己本身也拥有一个dep属性,后期第九题$set也有涉及)。

    性能优化相关:

    • 每一个属性都要重定义,对象层级过深会递归劫持,性能就会变差
    • 不需要响应数据的内容不要放到data中(即后续新增的新值不会被监听,不能实现响应式数据,只能用vue.$set)
    • Object.freeze()可以冻结数据。冻结后的数据就不能用defineProperty重定义。

    vue【对象】响应式数据原理mock

    源码地址

    源码位置:

    github:src/core/observer/index.js:135

    本文使用 mdnice 排版

  • 相关阅读:
    Quicksum -SilverN
    uva 140 bandwidth (好题) ——yhx
    uva 129 krypton factors ——yhx
    uva 524 prime ring problem——yhx
    uva 10976 fractions again(水题)——yhx
    uva 11059 maximum product(水题)——yhx
    uva 725 division(水题)——yhx
    uva 11853 paintball(好题)——yhx
    uva 1599 ideal path(好题)——yhx
    uva 1572 self-assembly ——yhx
  • 原文地址:https://www.cnblogs.com/padding1015/p/13744218.html
Copyright © 2011-2022 走看看