我们经常用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. 2019牛客多校一 H. XOR (线性基)

    大意: 给定序列, 求所有异或和为$0$的子序列大小之和. 先求出线性基, 假设大小为$r$. 对于一个数$x$, 假设它不在线性基内, 那么贡献为$2^{n-r-1}$ 因为它与其余不在线性基内数的 ...

  2. 2017 ACM-ICPC 亚洲区(西安赛区)网络赛 Coin 矩阵快速幂

    Bob has a not even coin, every time he tosses the coin, the probability that the coin's front face u ...

  3. (十) 使用Hibernate 注解

    Hibernate里有两种注解 : Hibernate 注解 JPA注解 主键生成机制 : http://www.cnblogs.com/ph123/p/5692194.html 案例一:   用注解 ...

  4. (八)装配Bean(2)

    二.在Java类中进行显式的装配 显式配置有两种: 1. 一种是在java(本文讲解)   2. 另一种是xml配置文件(第一章有讲) 案例一: 使用java显式装配+@autowired自动装配的方 ...

  5. ubuntu装openssh-client和openssh-server

    1. 修改update源 进入/etc/apt/目录,首先用cp命令将sources.list备份成sources.list.bk,然后复制http://www.cnblogs.com/eastson ...

  6. 03 Django之视图函数

    一.Django的视图函数view 一个视图函数(类),简称视图,是一个简单的Python函数(类),它接受WEB请求并返回Web响应. 响应可以是一张网页的HTML内容,一个重定向,一个404错误, ...

  7. [LeetCode] 15. 3Sum ☆☆☆(3数和为0)

    描述 Given an array nums of n integers, are there elements a, b, c in nums such that a + b + c = 0? Fi ...

  8. .netFramework中新增的功能—.net最新信息—.net的发展

    关键字:.NET Framework 中的新增功能 链接地址:https://docs.microsoft.com/zh-cn/dotnet/framework/whats-new/index 链接地 ...

  9. Auth2.0 例子【转载】

    本文转载自:https://www.cnblogs.com/flashsun/p/7424071.html 1.引言 本篇文章是介绍OAuth2.0中最经典最常用的一种授权模式:授权码模式 非常简单的 ...

  10. c/c++编译器配置(交叉编译重要参数)、交叉编译动态库与as配置、mk初步

    gcc/g++/clang,相当于javac: 了解c/c++编译器的基本使用,能够在后续移植第三方框架进行交叉编译时,清楚的了解应该传递什么参数. clang: clang 是一个C.C++.Obj ...