zoukankan      html  css  js  c++  java
  • Vue2 响应式原理

    我们经常用vue的双向绑定,改变data的某个属性值,vue就马上帮我们自动更新视图,下面我们看看原理。

    Object的响应式原理:

    可以看到,其实核心就是把object的所有属性都加上getter、setter,get时收集依赖,set时通知依赖,达到响应式更新的目的。

    但是显而易见的,这种方法无法监测到data增加属性和删除属性的动作

    Array的响应式原理:

    可以看到array的原理和object类似,但是因为大多数情况下都不是set,而是一些操作数组的方法(push、pull、shift...),所以我们加了一层拦截器去通知Dep。

    而array里面的元素如果是object类型的话,就跟上面object类型一样转Observer来实现响应式

    但是这样设计的缺陷也显而易见,就是直接修改元素(array[0]=123)、直接操作array.length这样的操作,vue是无法监听到的。

    为了把上面提到的缺陷修补,vue3会用proxy来重写observer。

  • 相关阅读:
    023 AQS--JUC的核心
    022 Future接口
    021 Callable接口
    020 线程的综合考虑
    019 线程协作
    命令,lldb,llvm,gdb,gcc,
    @class,import,
    arc,自动引用计数,
    写在哪里,
    40岁生日,
  • 原文地址:https://www.cnblogs.com/amiezhang/p/11279774.html
Copyright © 2011-2022 走看看