我们经常用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。

Vue2 响应式原理的更多相关文章

  1. Vue2响应式原理

    vue2响应式原理 vue的特性:数据驱动视图和双向数据绑定.vue官方文档也提供了响应式原理的解释: 深入响应式原理 Object.defineProperty() Object.definePro ...

  2. [切图仔救赎]炒冷饭--在线手撸vue2响应式原理

    --图片来源vue2.6正式版本(代号:超时空要塞)发布时,尤雨溪推送配图. 前言 其实这个冷饭我并不想炒,毕竟vue3马上都要出来.我还在这里炒冷饭,那明显就是搞事情. 起因: 作为切图仔搬砖汪,长 ...

  3. vue2响应式原理与vue3响应式原理对比

    VUE2.0 核心 对象:通过Object.defineProtytype()对对象的已有属性值的读取和修改进行劫持 数组:通过重写数组更新数组一系列更新元素的方法来实现元素的修改的劫持 Object ...

  4. 由浅入深,带你用JavaScript实现响应式原理(Vue2、Vue3响应式原理)

    由浅入深,带你用JavaScript实现响应式原理 前言 为什么前端框架Vue能够做到响应式?当依赖数据发生变化时,会对页面进行自动更新,其原理还是在于对响应式数据的获取和设置进行了监听,一旦监听到数 ...

  5. vue3剖析:响应式原理——effect

    响应式原理 源码目录:https://github.com/vuejs/vue-next/tree/master/packages/reactivity 模块 ref: reactive: compu ...

  6. vue2.0与3.0响应式原理机制

    vue2.0响应式原理 - defineProperty 这个原理老生常谈了,就是拦截对象,给对象的属性增加set 和 get方法,因为核心是defineProperty所以还需要对数组的方法进行拦截 ...

  7. Vue2.x响应式原理

    一.回顾Vue响应式用法 ​ vue响应式,我们都很熟悉了.当我们修改vue中data对象中的属性时,页面中引用该属性的地方就会发生相应的改变.避免了我们再去操作dom,进行数据绑定. 二.Vue响应 ...

  8. Vue源码--解读vue响应式原理

    原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...

  9. Vue响应式原理的实现-面试必问

    Vue2的数据响应式原理 1.什么是defineProperty? defineProperty是设置对象属性,利用属性里的set和get实现了响应式双向绑定: 语法:Object.definePro ...

随机推荐

  1. Mysql分表和分区的区别、分库和分表区别

    一,什么是mysql分表,分区 什么是分表,从表面意思上看呢,就是把一张表分成N多个小表,具体请看:mysql分表的3种方法. 什么是分区,分区呢就是把一张表的数据分成N多个区块,这些区块可以在同一个 ...

  2. (四)Spring Boot之配置文件-多环境配置

    一.Properties多环境配置 1. application.properties配置激活选项 spring.profiles.active=dev 2.添加其他配置文件 3.结果 applica ...

  3. vue 数组对象取对象的属性: Cannot read property 'xxxx' of undefined

    {{ list[0].name }} list[0]没有定义 能正确打印出想要的结果,但就是报错,外面套个v-for就没错了 很费解 看到文章说是与异步有关,解决办法: <template v- ...

  4. vue + element-ui 国际化实现

    1. 安装组件和插件 cnpm i element-ui -S // 安装elementcnpm i vue-i18n -S //安装i18n 2.将国际化资源放在assets目录下 3.在src下新 ...

  5. 搭建KVM环境——06 创建虚拟机

    若转载请于明显处标明出处:https://www.cnblogs.com/kelamoyujuzhen/p/9071181.html 虚拟机磁盘格式 创建一个raw格式的虚拟机磁盘 [root@Cen ...

  6. java_字符串

    一.字符串变量 由一个专门的字符串类来进行存储处理字符串的,String类 二.字符串的连接 连接符:+ 转义字符 每个转义字符都是由两个符号组成,但是编译器把它当成一个字符. 三.字符串处理 1.求 ...

  7. Centos7下安装MongoDB4.0.10

    前言 模式自由 :可以把不同结构的文档存储在同一个数据库里 面向集合的存储:适合存储 JSON风格文件的形式 完整的索引支持:对任何属性可索引 复制和高可用性:支持服务器之间的数据复制,支持主-从模式 ...

  8. Lua 学习之基础篇六<Lua IO 库>

    引言 I/O 库提供了两套不同风格的文件处理接口. 第一种风格使用隐式的文件句柄: 它提供设置默认输入文件及默认输出文件的操作, 所有的输入输出操作都针对这些默认文件. 第二种风格使用显式的文件句柄. ...

  9. ubuntu 服务器添加新磁盘

    原文 Linux系统扩容根目录磁盘空间的操作方法 这篇文章主要介绍了Linux系统扩容根目录磁盘空间的操作方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 一.使用背景 Linux根目录磁 ...

  10. Java8-Lock-No.03

    import java.util.HashMap; import java.util.Map; import java.util.concurrent.ExecutorService; import ...