Vue响应式系统的原理详解

目录
  • vue响应式系统的基本原理
    • 1.回顾一下Object.defineProperty的用法
    • 2.实战1:使用 Object.defineProperty 对 person的age属性 进行监听
    • 3.数据代理
    • 4.vue中实现响应式思路
  • 总结
    • 1.Vue中的数据代理:
    • 2.Vue中数据代理的好处:
    • 3.基本原理:
    • 4.vue中实现响应式思路

vue响应式系统的基本原理

我们使用vue时,对数据进行操作,就能影响对应的视图。那么这种机制是怎么实现的呢?

思考一下,是不是就好像我们对数据的操作 被“某人”监视了?一旦我们对数据进行了更改,“某人”就能感应到,并帮我们更新视图

那么这个“某人”到底是谁呢?其实它很普通,就是我们基础里面有学过的 Object.defineProperty,使用它来对数据进行一下加工,就能实现当数据被读时,执行“读”的回调函数;数据被写时,执行“写”的回调函数。

接下来,我们将简单回顾该方法的使用,再用几个实战小例子带大家彻底弄懂这个原理。

1.回顾一下Object.defineProperty的用法

参数解释:

	obj: 目标对象
	prop: 需要操作的目标对象的属性名
	descriptor: 描述符

	return value 传入对象

descriptor的一些属性,简单介绍几个属性。

	enumerable,属性是否可枚举,默认 false。
	configurable,属性是否可以被修改或者删除,默认 false。
	writable,属性是否可以被修改,默认false
	get,获取属性的方法。
	set,设置属性的方法。

完整用法:

	Object.defineProperty(obj, prop, descriptor)

2.实战1:使用 Object.defineProperty 对 person的age属性 进行监听

踩坑

看下面代码,乍一看是不是感觉没什么不妥?

当有人读取person的age属性时,我就把person的age属性return出去;当有人修改person的age属性,我就直接修改person.age的值。

但是!同学们,运行了一下,虽然没报错,但是编译器一直疯狂输出“@@有人读取了age属性”。

这是为啥呢?你想想,你在get函数里面直接return person.age,这算不算又一次读取了person的age属性呢?此时程序又去执行age的get函数,反反复复。

打个比方哈,相当于 你想读取age,于是你告诉编译器,我要输出person.age,好的,编译器去查person.age,发现它有get函数,于是执行get函数,此时你以为你要拿到它的值了,没想到get函数里面又告诉编译器,我要person.age。这样的话,就形成了死循环!!

那要怎么解决呢?我在get里面不能直接返回 person.age,那我要怎么拿到这个属性的值呢?

:是不是可以用变量来替代呢?

我把person.age的值放在变量ageNumber中,我要读的时候,就返回ageNumber的值;要修改的时候,就修改ageNumber的值;

这样不就避免了在get,set函数里面直接用person.age来访问吗?

正确代码

这时,效果就完成了,读取和修改的时候,都能被监听到。

3.数据代理

数据代理是什么意思呢?

答:简单解释一下,就是通过一个对象 代理 对另一个对象中属性的操作 (读/写)

有点抽象对吗?用下面的小例子来解释一下吧。

当老师想查看 或者 修改学生的成绩时,直接在老师这个对象上操作就行了,不需要直接去操作student对象。

这也就是上面想解释的,通过 老师对象(teacher) 代理 了学生对象(student)中的成绩属性(score)的操作 (读/写)

4.vue中实现响应式思路

有一点vue2基础的同学们应该知道,我们在vue中data() {} 中定义的数据,是不是都会被挂载到vm对象上去?然后我们是通过 this.数据名 来对数据进行操作的,对吗?

那这个是不是就相当于上面的小例子中的情景呢,这里是vm对象   代理   你定义的data对象中的属性的操作(读/写)

再用个例子完整实现一下vue的响应式原理

把data对象中的所有属性 交给 vm对象进行代理(让vm 掌控data对象中的属性的 (读/写) 操作 )当数据变化时,能更新对应视图

总结

1.Vue中的数据代理:

通过vm对象来代理data对象中属性的操作(读/写)

2.Vue中数据代理的好处:

更加方便的操作data中的数据

3.基本原理:

通过Object.defineProperty()把data对象中所有属性添加到vm上。

为每一个添加到vm上的属性,都指定一个getter/setter。

getter/setter内部去操作(读/写)data中对应的属性。

4.vue中实现响应式思路

不使用数据代理,直接把数据 赋值 挂载到vm上。

1.下图的方法是对 数据对象设置get,set的通用方法

2.在new一个Vue时,就会直接把用户传入的data对象,挂载到Vue实例身上

再对Vue实例上面的data对象进行监视(响应式处理)

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

(0)

相关推荐

  • Vue如何实现响应式系统

    前言 最近深入学习了Vue实现响应式的部分源码,将我的些许收获和思考记录下来,希望能对看到这篇文章的人有所帮助.有什么问题欢迎指出,大家共同进步. 什么是响应式系统 一句话概括:数据变更驱动视图更新.这样我们就可以以"数据驱动"的思维来编写我们的代码,更多的关注业务,而不是dom操作.其实Vue响应式的实现是一个变化追踪和变化应用的过程. vue响应式原理 以数据劫持方式,拦截数据变化:以依赖收集方式,触发视图更新.利用es5 Object.defineProperty拦截数据的set

  • Vue3.0 响应式系统源码逐行分析讲解

    前言 关于响应式原理想必大家都很清楚了,下面我将会根据响应式API来具体讲解Vue3.0中的实现原理, 另外我只会针对get,set进行深入分析,本文包含以下API实现,推荐大家顺序阅读 effect reactive readonly computed ref 对了,大家一定要先知道怎么用哦~ 引子 先来段代码,大家可以直接复制哦,注意引用的文件 <!DOCTYPE html> <html lang="en"> <head> <meta ch

  • vue响应式系统之observe、watcher、dep的源码解析

    Vue的响应式系统 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的JavaScript 对象,而当你修改它们时,视图会进行更新,这使得状态管理非常简单直接,我们可以只关注数据本身,而不用手动处理数据到视图的渲染,避免了繁琐的 DOM 操作,提高了开发效率. vue 的响应式系统依赖于三个重要的类:Dep 类.Watcher 类.Observer 类,然后使用发布订阅模式的思想将他们揉合在一起(不了解发布订阅模式的可以看我之前的文章发布订阅模式与观察者模式). Obser

  • Vue响应式系统的原理详解

    目录 vue响应式系统的基本原理 1.回顾一下Object.defineProperty的用法 2.实战1:使用 Object.defineProperty 对 person的age属性 进行监听 3.数据代理 4.vue中实现响应式思路 总结 1.Vue中的数据代理: 2.Vue中数据代理的好处: 3.基本原理: 4.vue中实现响应式思路 vue响应式系统的基本原理 我们使用vue时,对数据进行操作,就能影响对应的视图.那么这种机制是怎么实现的呢? 思考一下,是不是就好像我们对数据的操作 被

  • Vue 响应式系统依赖收集过程原理解析

    目录 背景 目标 源码解读 入口函数:observe class Observer Observe 如何处理数组 Observe 如何处理对象 class Dep Dep.target class Watcher Watcher 的应用 何时触发依赖收集? 数据变化时,如何进行更新? 总结 参考资料 背景 在 Vue 的初始化阶段,_init 方法执行的时候,会执行 initState(vm) ,它的定义在 src/core/instance/state.js 中.在初始化 data 和 pro

  • Bootstrap 响应式实用工具实例详解

    Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发.这些可以通过媒体查询结合大型.小型和中型设备,实现内容对设备的显示和隐藏. 需要谨慎使用这些工具,避免在同一个站点创建完全不同的版本.响应式实用工具目前只适用于块和表切换. 实例 下面的实例演示了上面所列举的帮助器类的用法.调整浏览器的窗口大小,或者在不同的设备上加载实例,测试响应式实用工具类. <div class="container" style="padding: 40px;"&

  • PHP实现链式操作的原理详解

    在一个类中有多个方法,当你实例化这个类,并调用方法时只能一个一个调用,类似: db.php <?php class db { public function where() { //code here } public function order() { //code here } public function limit() { //code here } } index.php <?php $db = new db(); $db->where(); $db->order()

  • 实现一个VUE响应式属性装饰器详析

    目录 前言 不使用任何的响应Api 使用 reactive 实现 使用 ref 实现 使用装饰器实现 实现Reactive装饰器 实现Watch装饰器 总结 前言 使用面向对象的开发思想难免会用到类,既然有了类,那就应该有实例,然而我们使用类的时候可能需要实例中的某个属性是vue的响应属性,也可能里面的某个方法也可以被vue的watch监听.我就开始琢磨如何通过 Composition API 来实现这个类属性装饰器 不使用任何的响应Api // TestReactive.ts export c

  • 图解Vue 响应式流程及原理

    目录 阅读本文能够帮助你什么? 一.组件化流程 1. 整个new Vue阶段做了什么? 2. 普通dom元素如何渲染到页面? 3. 组件如何渲染到页面? 4. Vue组件化简化流程 二.响应式流程 1. 依赖收集 2. 派发更新 三.彩蛋篇 1. computed依赖收集 2. computed派发更新 3. user Watcher依赖收集 阅读本文能够帮助你什么? 在学习vue源码的时候发现组件化过程很绕? 在响应式过程中Observer.Dep.Watcher三大对象傻傻分不清? 搞不清楚

  • Vue.js双向绑定实现原理详解

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少的代码实现那个hello world开篇示例. 参考文章:http://www.jb51.net/article/100819.htm 一.访问器属性 访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过defineProperty()方法单独定义. var obj = { }; /

  • Vue监听数据的原理详解

    目录 一.引入 二.监测对象 2.1 为什么需要监测对象 2.2数据代理 2.3 对象监测相关API之Vue.set 2.4 为对象赋多个新值 三.监测数组 总结 一.引入 首先画一个简单的图. 我们在写Vue的时候总会和数据打交道,将我们的目标数据写在data中,然后在template的差值表达式中通过{{xxx}}的格式可以响应式的渲染数据.当data中的数据改变时,这里橙色的线就会引起差值表达式的变化.那么问题来了,我们如何监测到data中数据的改变呢?这里就涉及到了Vue监测数据的问题.

  • vue 搭建后台系统模块化开发详解

    本文主要介绍了vue 搭建后台系统模块化开发,分享给大家,具体如下: 效果 目录结构 ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── logo.png │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── confi

随机推荐