响应式系统的基本原理
响应式系统的基本原理
响应式系统
Vue.js 是一款 MVVM 框架,数据模型仅仅是普通的 JavaScript 对象,但是对这些对象进行操作时,却能影响对应视图,它的核心实现就是「响应式系统」。尽管我们在使用 Vue.js 进行开发时不会直接修改「响应式系统」,但是理解它的实现有助于避开一些常见的「坑」,也有助于在遇见一些琢磨不透的问题时可以深入其原理来解决它。
Object.defineProperty
首先我们来介绍一下 Object.defineProperty
,Vue.js就是基于它实现「响应式系统」的。
首先是使用方法:
/*obj: 目标对象prop: 需要操作的目标对象的属性名descriptor: 描述符return value 传入对象
*/
Object.defineProperty(obj, prop, descriptor)
descriptor的一些属性,简单介绍几个属性,具体可以参考 MDN 文档。
enumerable
,属性是否可枚举,默认 false。configurable
,属性是否可以被修改或者删除,默认 false。get
,获取属性的方法。set
,设置属性的方法。
实现 observer
(可观察的)
知道了 Object.defineProperty
以后,我们来用它使对象变成可观察的。
这一部分的内容我们在第二小节中已经初步介绍过,在 init
的阶段会进行初始化,对数据进行「响应式化」。
为了便于理解,我们不考虑数组等复杂的情况,只对对象进行处理。
首先我们定义一个 cb
函数,这个函数用来模拟视图更新,调用它即代表更新视图,内部可以是一些更新视图的方法。
function cb (val) {/* 渲染视图 */console.log("视图更新啦~");
}
然后我们定义一个 defineReactive
,这个方法通过 Object.defineProperty
来实现对对象的「响应式」化,入参是一个 obj(需要绑定的对象)、key(obj的某一个属性),val(具体的值)。经过 defineReactive
处理以后,我们的 obj 的 key 属性在「读」的时候会触发 reactiveGetter
方法,而在该属性被「写」的时候则会触发 reactiveSetter
方法。
function defineReactive (obj, key, val) {Object.defineProperty(obj, key, {enumerable: true, /* 属性可枚举 */configurable: true, /* 属性可被修改或删除 */get: function reactiveGetter () {return val; /* 实际上会依赖收集,下一小节会讲 */},set: function reactiveSetter (newVal) {if (newVal === val) return;cb(newVal);}});
}
当然这是不够的,我们需要在上面再封装一层 observer
。这个函数传入一个 value(需要「响应式」化的对象),通过遍历所有属性的方式对该对象的每一个属性都通过 defineReactive
处理。(注:实际上 observer 会进行递归调用,为了便于理解去掉了递归的过程)
function observer (value) {if (!value || (typeof value !== 'object')) {return;}Object.keys(value).forEach((key) => {defineReactive(value, key, value[key]);});
}
最后,让我们用 observer
来封装一个 Vue 吧!
在 Vue 的构造函数中,对 options
的 data
进行处理,这里的 data
想必大家很熟悉,就是平时我们在写 Vue 项目时组件中的 data
属性(实际上是一个函数,这里当作一个对象来简单处理)。
class Vue {/* Vue构造类 */constructor(options) {this._data = options.data;observer(this._data);}
}
这样我们只要 new 一个 Vue 对象,就会将 data
中的数据进行「响应式」化。如果我们对 data
的属性进行下面的操作,就会触发 cb
方法更新视图。
let o = new Vue({data: {test: "I am test."}
});
o._data.test = "hello,world."; /* 视图更新啦~ */
至此,响应式原理已经介绍完了,接下来让我们学习「响应式系统」的另一部分 ——「依赖收集」。
注:本节代码参考《响应式系统的基本原理》。
响应式系统的基本原理相关推荐
- 什么是响应式设计?为什么要做响应式设计?响应式设计的基本原理是什么?...
页面的设计和开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包括弹性网格和布局.图片.css media query的使用等.无论用 ...
- data的值 如何初始化vue_理解Vue响应式系统
深入理解 Vue 响应式系统 理解 Vue 响应式原理,到 computed.vuex 原理 前言 众所周知,一说到 vue 的响应式系统,就能马上想到 Object.defineProperty.数 ...
- 8、什么是响应式设计?响应式设计的基本原理是什么?如何做?
简介 我这么理解:响应式布局就是一个网站能够兼容多个设备,可以根据屏幕的大小自动调整页面的展示方式以及布局,我们不用为每一个设备做一个特定的版本.响应式网站的特点: 同时适配PC+平板+手机等 网站的 ...
- 14.什么是响应式设计?响应式设计的基本原理是什么?如何做?
一.是什么 响应式网站设计(Responsive Web design)是一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整 描述 ...
- 什么是响应式设计?响应式设计的基本原理是什么?如何做
是什么 响应式网站设计(Responsive Web design)是一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整 描述响应 ...
- 面试官:什么是响应式设计?响应式设计的基本原理是什么?如何做?
一.是什么 响应式网站设计(Responsive Web design)是一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整 描述 ...
- 什么是响应式设计?为什么要做响应式设计?响应式设计的基本原理是什么?(十九)
什么是响应式设计?为什么要做响应式设计?响应式设计的基本原理是什么? 页面的设计和开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包 ...
- 什么是响应式设计?响应式设计的基本原理是什么?如何做?
响应式设计文章目录 1.响应式设计 2.基本原理 3.实现方式 4.总结 5.响应式布局的优缺点 1.响应式设计 是一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台,屏幕尺 ...
- (6K字!)从零实现vue3响应式系统!
在介绍响应式系统之前,先了解一些概念. 副作用函数 能产生副作用的函数就是副作用函数. 何为副作用?在我理解,就是会可能对其他的除了自身以外的数据造成变化的的函数.比如修改了全局变量,修改了引用的参数 ...
最新文章
- EL 表达式 JSTL 标签库
- python电影推荐算法_电影推荐系统python实现
- 【复杂系统迁移 .NET Core平台系列】之静态文件
- oracle之单行函数之分组函数
- Mac 远程命令工具
- HDR【openCV实现】
- 装有支付宝的手机丢了可咋办
- bootstrap学习记录
- 【Cqoi2006】【BZOJ2222】猜数游戏(乱搞)
- 一些不错 Java 实践推荐!建议熟读并背诵默写全文
- 可以提高千倍效率的Java代码小技巧
- python脚本报错:OSError: [WinError 193] %1 不是有效的 Win32 应用程序。
- j2me模拟器java游戏存档修改,j2me loader模拟器中文
- 电音插件auto_Antares 发布新型人声制作插件 Auto-Tune EFX +
- java -基于反射和XML,将XML内的数据输出
- 用python完成图形输出设备_使用numpy进行9宫格图像拼接 - Python
- SSM SpringBoot vue办公自动化计划管理系统
- 关于前端 后端 数据库 时间的设置与传递
- 金三银四产品人跳槽指南——找准定位,突破职业瓶颈
- OpenHarmony学习笔记——I2C驱动0.96OLED屏幕
热门文章
- 白银T+D [Ag(T+D)]业务介绍
- Node.js: 认识流stream
- 手机firebug查看网页代码 How to View Website Source Codes on iPad / iPhone
- Shell编程:简洁的 Bash Programming 技巧
- Magento中调用JS文件的几种方法
- Makefile.am和makefile.in生成Makefile
- dsh批量管理linux服务器
- linux系统上传下载命令rz和sz
- 神奇的python(二)之python打包成应用程序
- 华为机试——数字颠倒