Vue2 响应式系统之深度响应
更新时间：2022年04月12日 20:17:54 作者：windliang
这篇文章主要介绍了Vue2 响应式系统之深度响应，文章基于Vue2 响应式系统的相关资料展开对Vue2 深度响应的介绍，需要的小伙伴可以参考一下
1、场景
import { observe } from "./reactive";
import Watcher from "./watcher";
const data = {
text: {
innerText: {
childText: "hello",
},
},
};
observe(data);
const updateComponent = () => {
console.log(data.text.innerText.childText);
};
new Watcher(updateComponent);
data.text.innerText.childText = "liang";
我们的响应式系统到现在还没有支持属性是对象时候的响应，因此我们改变 的时候不会有任何输出。childText
我们只收集了 的依赖，所以如果想要响应的话必须给 整个赋值为一个新对象。data.textdata.text
import { observe } from "./reactive";
import Watcher from "./watcher";
const data = {
text: {
innerText: {
childText: "hello",
},
},
};
observe(data);
const updateComponent = () => {
console.log(data.text.innerText.childText);
};
new Watcher(updateComponent);
data.text = {
innerText: {
childText: "liang",
},
};
我们当然不希望每次都赋值整个对象，我们需要做一些修改，把嵌套的对象也变成响应式的。
2、方案
我们只需要在给某个 重写 和 之前，把它的 就像上边给 调用 函数一样，也调用一次 函数即可。keygetsetvaluedataobserveobserve
同时提供 参数，留下扩展，让外界决定是否需要深度响应。shallow
/*******************新增 shallow*******************/
export function defineReactive(obj, key, val, shallow) {
/****************************************************/
const property = Object.getOwnPropertyDescriptor(obj, key);
// 读取用户可能自己定义了的 get、set
const getter = property && property.get;
const setter = property && property.set;
// val 没有传进来话进行手动赋值
if ((!getter || setter) && arguments.length === 2) {
val = obj[key];
}
const dep = new Dep(); // 持有一个 Dep 对象，用来保存所有依赖于该变量的 Watcher
/*******************新增****************************/
!shallow && observe(val);
/******************************************************/
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter() {
const value = getter ? getter.call(obj) : val;
if (Dep.target) {
dep.depend();
}
return value;
},
set: function reactiveSetter(newVal) {
const value = getter ? getter.call(obj) : val;
if (setter) {
setter.call(obj, newVal);
} else {
val = newVal;
}
dep.notify();
},
});
}
同时，在 函数中，传进来的 不是对象的话我们直接 。observevaluereturn
/*
util.js
export function isObject(obj) {
return obj !== null && typeof obj === "object";
}
*/
export function observe(value) {
if (!isObject(value)) {
return;
}
let ob = new Observer(value);
return ob;
}
3、场景2
import { observe } from "./reactive";
import Watcher from "./watcher";
const data = {
text: {
innerText: {
childText: "hello",
},
},
};
observe(data);
const updateComponent = () => {
console.log(data.text.innerText.childText);
};
new Watcher(updateComponent);
data.text.innerText.childText = "liang";
data.text = {
innerText: {
childText: "liang2",
},
};
data.text.innerText.childText = "liang3";
可以一分钟想一下上边会输出什么。
new Watcher(updateComponent); ，执行一次 输出 。updateComponenthello
data.text.innerText.childText = "liang"; ，我们已经解决了属性是对象的情况，因此这里也会输出 。liang
data.text = {
innerText: {
childText: "liang2",
},
};
上边代码就是文章最开头的方法，因此也会触发函数执行，输出 。liang2
data.text.innerText.childText = "liang3"; 最后这句会执行吗？
答案是否定的了，因为我们的 赋值为了一个新对象，但这个新对象我们并没有将其设置为响应式的。data.text
因此我们需要在 的时候把对象也设置为响应式的。set
/**
* Define a reactive property on an Object.
*/
export function defineReactive(obj, key, val, shallow) {
const property = Object.getOwnPropertyDescriptor(obj, key);
// 读取用户可能自己定义了的 get、set
const getter = property && property.get;
const setter = property && property.set;
// val 没有传进来话进行手动赋值
if ((!getter || setter) && arguments.length === 2) {
val = obj[key];
}
const dep = new Dep(); // 持有一个 Dep 对象，用来保存所有依赖于该变量的 Watcher
let childOb = !shallow && observe(val);
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter() {
const value = getter ? getter.call(obj) : val;
if (Dep.target) {
dep.depend();
}
return value;
},
set: function reactiveSetter(newVal) {
const value = getter ? getter.call(obj) : val;
if (setter) {
setter.call(obj, newVal);
} else {
val = newVal;
}
/******新增 *************************/
childOb = !shallow && observe(newVal);
/************************************/
dep.notify();
},
});
}
4、总结
通过递归解决了属性是对象的依赖，可以为未来数组的依赖留下基础。
到此这篇关于Vue2 响应式系统之深度响应的文章就介绍到这了,更多相关Vue2 深度响应内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
useVModel()用来实现父子组件间数据的双向绑定,若不想使用默认回调,也可以自己使用emit实现回调,这篇文章主要给大家介绍了关于vue中useVModel()使用方法的相关资料,需要的朋友可以参考下2024-03-03
本文主要介绍了vue项目中实现el-dialog组件可拖拽效果，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
这篇文章主要介绍了Vue预览.md文件的两种方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2025-04-04
在Vue中,你可以使用动态import()语法来动态加载组件,动态导入允许你在需要时异步加载组件,这样可以提高应用程序的初始加载性能,本文给大家介绍在Vue中使用动态import()语法动态加载组件,感兴趣的朋友一起看看吧2023-11-11
本篇文章主要介绍了vuejs2.0运用原生js实现简单的拖拽元素功能示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-02-02
这篇文章主要为大家详细介绍了vue-router单页面路由的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
最近在开发过程对对于组件化的开发有一些感想，于是开始记录下这些。弹窗组件一直是 web 开发中必备的，使用频率相当高，最常见的莫过于 alert，confirm和prompt这些,不同的组件库对于弹窗的处理也是不一样的，下面来一起看看吧。2016-09-09
这篇文章主要给大家介绍了Vue实现订单支付倒计时功能,倒计时这要运用在创建订单后15分钟内进行支付,否则订单取消,本文结合示例代码给大家详细讲解,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了详解element-ui中表单验证的三种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
这篇文章主要介绍了vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信,需要的朋友可以参考下2019-08-08
最新评论