响应式的话,主要指的是这个状态改变以后,视图要去主动更新

这个过程,vue是通过两个步骤来实现的

  • 1 数据的劫持

数据劫持也叫做数据拦截,通过Object.defineProperty来把对象中的每一个属性转成setter,getter。那这样的话,在修改对应的属性的时候,就能够去触发这个setter,这样就可以知道哪个属性改变了。

  • 2 依赖收集

就是在渲染视图的时候,要将这个观察者(watcher)和具体的属性结合起来,然后通过发布订阅的模式,这样数据的改变就能够更加精准的去更新到视图上。

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

  1. Vue2.x响应式原理

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

  2. Vue2.0响应式原理以及重写数组方法

    // 重写数组方法 let oldArrayPrototype = Array.prototype; let proto = Object.create(oldArrayPrototype); ['p ...

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

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

  4. vue3响应式原理以及ref和reactive区别还有vue2/3生命周期的对比,第二天

    前言: 前天我们学了 ref 和 reactive ,提到了响应式数据和 Proxy ,那我们今天就来了解一下,vue3 的响应式 在了解之前,先复习一下之前 vue2 的响应式原理 vue2 的响应 ...

  5. 【Vue源码学习】响应式原理探秘

    最近准备开启Vue的源码学习,并且每一个Vue的重要知识点都会记录下来.我们知道Vue的核心理念是数据驱动视图,所有操作都只需要在数据层做处理,不必关心视图层的操作.这里先来学习Vue的响应式原理,V ...

  6. vue3 第二天vue响应式原理以及ref和reactive区别

    前言: 前天我们学了 ref 和 reactive ,提到了响应式数据和 Proxy ,那我们今天就来了解一下,vue3 的响应式 在了解之前,先复习一下之前 vue2 的响应式原理 vue2 的响应 ...

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

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

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

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

  9. Vue2响应式原理

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

  10. Vue2 响应式原理

    我们经常用vue的双向绑定,改变data的某个属性值,vue就马上帮我们自动更新视图,下面我们看看原理. Object的响应式原理: 可以看到,其实核心就是把object的所有属性都加上getter. ...

随机推荐

  1. 精华推荐 |【算法数据结构专题】「延时队列算法」史上非常详细分析和介绍如何通过时间轮(TimingWheel)实现延时队列的原理指南

    时间轮的介绍 时间轮(TimeWheel)是一种实现延迟功能(定时器)的精妙的高级算法,其算法应用范围非常广泛,在Java开发过程中常用的Dubbo.Netty.Akka.Quartz.ZooKeep ...

  2. 生物制剂时代的SpA研究正站在十字路口_Appel,Sieper2009

    中信国健临床通讯 2009年第1期 生物制剂时代的脊柱关节炎研究正站在十字路口: 影像学.病理学和结构破坏       Heiner Appel, MD Joachim Sieper, MD   Cu ...

  3. 开源免费3D CAD软件:FreeCAD

    推荐:将 NSDT场景编辑器 加入你的3D开发工具链. FreeCAD是来自法国Matra Datavision公司的一款开源**3D CAD软件, 基于CAD / CAM / CAE几何模型核心,是 ...

  4. Postgresql12基于时间点恢复

    一.简介 数据库的PITR原理是依据之前的物理备份文件加上wal的预写日志模式备份做的恢复. 二.示例 1.数据库配置 wal_level = replica archive_mode = on ar ...

  5. Python爬虫:原来微博上的视频下载链接在这啊

    最近看了一下网页版的微博,觉得那上面的视频不错,想获取它上面的下载链接,于是就写了这篇博文. 1. 几个视频播放平台的下载链接的实现 1. 西瓜视频 西瓜视频这个平台上面的视频下载链接一开始就存在于视 ...

  6. 有趣的drop-shadow

    如果写了好几个阴影,filter: drop-shadow(-0.5vmin 6vmin 0 var(--s2)) drop-shadow(-4.5vmin 10vmin 0 var(--v3));将 ...

  7. 正点原子sys.h文档详解

    文档主体内容为位带的映射,目的是实现位带操作. 第一部分:位带映射的宏函数 1 #define BITBAND(addr, bitnum) ((addr & 0xF0000000)+0x200 ...

  8. VMware 关于mininet

    1.mininet安装是git clone git://github.com/mininet/mininet.git       (git clone http://github.com/minine ...

  9. 实验一C语言开发环境使用和数据类型·运算符·表达式

    #include<stdio.h> int main(){ printf(" o \n"); printf("<H>\n"); prin ...

  10. S-HR类加载器的区别

    S-HR的addon和sp下的jar包是由不同的类加载器来加载的: 1.如果/root/kingdee/eas/server/lib/sp的包的路径引用的是/root/kingdee/eas/serv ...