华南中天论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
华南中天论坛 门户 网络技术 大数据 查看内容

深入理解vue核心之一数据响应式

2020-1-18 22:14| 发布者: 我们不一样| 查看: 191| 评论: 0

摘要: vue响应式在初始化的时候混入响应式initState文件,利用的是Object.defineProerty进行数据劫持在改方法里面绑定get方

vue响应式在初始化的时候混入响应式initState文件,利用的是Object.defineProerty进行数据劫持在改方法里面绑定get方法和set方法,每一个组件会生成一个Watcher,它主要是保存更新函数 值发生变化调用更新函数updateComponent 再进行diff算法 对比实现更新 具体可以查看源码 下面实现小demo说明响应式。

// 第一步 定义一个对象
const obj = { foo: ‘foo’, bar: ‘bar’, baz: { a: 1 }}
// 第二步 实现响应式更新函数
observe(obj)

function observe(obj) {
// 如果要对数组做响应式 必须覆盖数组默认方法
if (typeof obj !== ‘object’ || obj == null) {
// 希望传入的是obj
return
}
Object.keys(obj).forEach(key => {
defineReactive(obj, key, obj[key])
})
}

function defineReactive(obj, key, val) {
// 递归 因为有可能val是对象
observe(val)

// 对传入obj进行访问拦截
Object.defineProperty(obj, key, {
get() {
console.log('get ’ + key);
return val
},
set(newVal) {
if (newVal !== val) {
console.log('set ’ + key + ‘:’ + newVal);
// 如果传入的newVal依然是obj,需要做响应化处理
observe(newVal)
val = newVal
}
}
})
}
// 第三步 然后再对改对象进行更新
obj.foo = ‘xxxx’;

下期预告:这里只是数据响应式, 如何实时将数据动态显示在页面 需要编写一个编译器 下期带来编译器的deom

小杨劳资 发布了12 篇原创文章 · 获赞 5 · 访问量 3303 私信 关注
来源:https://blog.csdn.net/weixin_39304726/article/details/104014849
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

鲜花

握手

雷人

路过

鸡蛋

最新评论

QQ|Archiver|手机版|小黑屋|南华中天社区 ( 粤ICP备11019662号 )

GMT+8, 2020-10-21 23:57 , Processed in 0.038797 second(s), 15 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

返回顶部