VUE响应式原理-如何追踪变化
Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接
如何追踪变化
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。
这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。这里需要注意的是不同浏览器在控制台打印数据对象时对 getter/setter 的格式化并不同，所以建议安装 vue-devtools 来获取对检查数据更加友好的用户界面。
每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
let oldArrPrototype = Array.prototype;
// 继承
let proto = Object.create(oldArrPrototype);
['push', 'shift', 'unshift','splice'].forEach(method => {
proto[method] = function() {
// 切片编程
// 更新视图
updateView();
oldArrPrototype[method].call(this, ...arguments)
}
}) // 观察函数
function observer(target) {
if (typeof target !== 'object' || target === null) {
return target;
}
if (Array.isArray(target)) {
target.__proto__ = proto;
// target.constructor.prototype = proto;
}
for (let key in target) {
/*
target:对象本身
key:对象的属性
target[key]:对象的值
*/
definedReactive(target, key, target[key])
}
} // defineProperty函数
function definedReactive(target, key, value) {
// 重新观察一下传过来的值
observer(value); //递归
Object.defineProperty(target, key, {
// get 读取属性值触发
get() {
return value;
},
// 修改属性值触发,默认有参数,是最新值
set(newValue) {
// 为了方式更改后的值也是对象
observer(newValue);
// 判断新值和旧值是否相同
// 如果不同,改变旧值,更新视图
if (newValue !== value) {
value = newValue;
updateView(value);
} else {
return newValue;
}
}
})
} // 更新视图方法
function updateView(value) {
console.log("更新视图" + value)
}
// 使用Object.defineProperty可以给属性重新定义属性,给属性增加getter,setter
// 这样给属性增加或者读取属性是都会触发getter 或者 setter
let data = {
name: "oldValue",
onj: {
name: "szx"
},
a: null,
n:[1,2,3]
}
// 定义一个观察函数,只要数据发生变动会触发更新视图的方法
observer(data) // data.name = "newValue" // data.a = {
// name: "100"
// },
// data.a.name = 200
data.n.splice(0)
console.log(data) // 如果属性不存在,即没有事先在data里面定义,赋值不存在的属性值的时候不会触发更新
</script>
</body>
</html>
VUE响应式原理-如何追踪变化的更多相关文章
- 详解Vue响应式原理
摘要: 搞懂Vue响应式原理! 作者:浪里行舟 原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...
- 深入Vue响应式原理
深入Vue.js响应式原理 一.创建一个Vue应用 new Vue({ data() { return { name: 'yjh', }; }, router, store, render: h =& ...
- 深度解析 Vue 响应式原理
深度解析 Vue 响应式原理 该文章内容节选自团队的开源项目 InterviewMap.项目目前内容包含了 JS.网络.浏览器相关.性能优化.安全.框架.Git.数据结构.算法等内容,无论是基础还是进 ...
- Vue源码--解读vue响应式原理
原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...
- 深入解析vue响应式原理
摘要:本文主要通过结合vue官方文档及源码,对vue响应式原理进行深入分析. 1.定义 作为vue最独特的特性,响应式可以说是vue的灵魂了,表面上看就是数据发生变化后,对应的界面会重新渲染,那么响应 ...
- vue响应式原理，去掉优化，只看核心
Vue响应式原理 作为写业务的码农,几乎不必知道原理.但是当你去找工作的时候,可是需要造原子弹的,什么都得知道一些才行.所以找工作之前可以先复习下,只要是关于vue的,必定会问响应式原理. 核心: / ...
- vue响应式原理解析
# Vue响应式原理解析 首先定义了四个核心的js文件 - 1. observer.js 观察者函数,用来设置data的get和set函数,并且把watcher存放在dep中 - 2. watcher ...
- 浅析Vue响应式原理（三）
Vue响应式原理之defineReactive defineReactive 不论如何,最终响应式数据都要通过defineReactive来实现,实际要借助ES5新增的Object.definePro ...
- 浅谈vue响应式原理及发布订阅模式和观察者模式
一.Vue响应式原理 首先要了解几个概念: 数据响应式:数据模型仅仅是普通的Javascript对象,而我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,提高开发效率. 双向绑定:数据改变,视图 ...
随机推荐
- 毒瘤dp 学校食堂
这道dp题 可谓是比较难了,我想了2h 总是觉得自己设的状态没有包涵全部的状态空间 一直想不出来状态 最后败北. 正解是这样的 我们肯定是有一维i的表示 到了i 这个人吃饭了 但是在i吃饭之前后面的7 ...
- BZOJ3772精神污染&BZOJ3488&luogu3242接水果
LINK1:精神污染 LINK2:[ONTAK2010Highways](http://www.lydsy.com/JudgeOnline/problem.php?id=3488) LINK3:[接水 ...
- Taurus.MVC 2.3.4 ：WebAPI 文档集成测试功能升级：WebAPI批量自动化测试功能。
前言: 最近升级了一下Taurus.MVC,现在最新版本是:Taurus.MVC 2.3.4,源码版本和nuget同步. 下面分三个步骤介绍下新版本的WebAPI批量自动化测试功能. 1.启用WebA ...
- 用python包xlwt将数据写入Excel中
一般用两种格式的数据写入,不多说放上demo. 1.列表形式写入 import xlwt def data_write(file_path, datas): f = xlwt.Workbook() s ...
- odoo13之给模块添加自定义配置项
配置项效果图 odoo中给系统添加配置项有两种方式, 一种是使用odoo自带的设置,在设置中添加配置项:效果如下图, 第二种是在模块中自定义一个配置项管理菜单,在菜单form视图下添加配置项:效果如下 ...
- 大学生可用来接单，利用Python实现教务系统扩容抢课！
最近一学期一次的抢课大戏又来了,几家欢乐几家愁.O(∩_∩)O哈哈~(l我每次一选就过了hah,我还是有欧的时候滴).看着他们盯着教务系统就着急,何况我们那教务系统,不想说什么.emmm 想周围的朋友 ...
- Hive: Reflect UDF
Reflect UDF JAVA类和方法通常用于处理用户希望在hive中使用的确切的函数.相比与封装一个UDF然后调用这个方法,这些 方法主要通过反射UDF去调用.Reflect使用Java反射去实例 ...
- 谈谈对Java平台的理解
从我第一次接触Java的时候,老师就说"Write once,run anywhere",这句话虽然听起来有一点太过于形式主义,但是也突出了它的特点.那么,现在的我们应该总结一下和 ...
- C#LeetCode刷题之#39-组合总和（Combination Sum）
目录 问题 示例 分析 问题 该文章已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3663 访问. 给定一个无重复元素的数组 candi ...
- C#开发笔记之07-如何实现交换2个变量的值而不引入中间变量？
C#开发笔记概述 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/963 访问. 这里给出常见的7种方法,仅供大家参考,部 ...