目录一,前言二,对象属性的深层观测问题1,抛出问题2,测试问题3,查看结果三,对象属性深层观测的实现1,实现思路2,代码逻辑四,data 相关优化五,结尾一,前言 上篇,主要介绍了在
上篇,主要介绍了在 Vue 的数据初始化流程中,对象属性的单层劫持是如何实现的
回顾一下,主要涉及以下几个核心点:
本篇,继续对 data 数据进行初始化操作,对象属性的深层劫持
当前版本的代码逻辑:
如果,data 对象中的属性,还是一个对象(称为obj)
那么,这个对象(obj)中的属性是不会被观测的(目前所说的观测还仅仅停留在数据劫持阶段)
就是说,当前仅实现了对 data 对象中属性的单层劫持,嵌套对象不会被深层劫持
<script>
let vm = new Vue({
el: '#app',
data() {
// data函数返回的对象中,obj属性为一个对象,它的属性不会被观测
return { message: 'Hello Vue', obj: { key: "val" } }
}
});
</script>
new Vue 时,传如的 options 选项中的 data 函数,
data 函数中,属性 obj 的值依然是一个对象 { key: “val” }
对象 { key: “val” } 中的 key,此时没有被添加 get 和 set 方法,说明 key 没有被劫持
TODO:需要先回顾一下,对象属性单层观测的流程
有了 data 对象单层观测的经验,对象属性 obj 深层劫持就简单多了
当对象属性 obj 即将被 Object.defineProperty 劫持时,
再对 obj 对象做一次“对象的单层劫持”
更深层的对象属性劫持,就是在递归执行“对象的单层劫持”
即:当属性为对象类型时(非 null)
继续进行 observe 观测,observe 的递归就实现了对象属性的深层劫持
function defineReactive(obj, key, value) {
observe(value);// 递归实现深层观测
Object.defineProperty(obj, key, {
get() {
return value;
},
set(newValue) {
if (newValue === value) return
value = newValue;
}
})
}
TODO:需要突出递归的逻辑
TODO:结合对象属性观测的特点,介绍 data 的相关优化
本篇主要实现了 Vue 数据初始化流程中,对象属性的深层劫持,核心思路就是递归;
下一篇,数组的劫持
到此这篇关于Vue对象的深层劫持详细讲解的文章就介绍到这了,更多相关Vue对象深层劫持内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue对象的深层劫持详细讲解
本文链接: https://www.lsjlt.com/news/177021.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0