Vue工作机制---数据响应式的实现

2022-07-03 08:51阅读：

http://blog.sina.cn/dpool/blog/u/3656211341

对于响应式的原理，下面给出一个简单的代码例子 <div id='app'>
<p id='name'></p>
</div>
<script>
var obj = {}
Object.defineProperty(obj, 'name',{
get:function () {
return document.querySelector('#name').innerHTML
},
set:function (val) {
document.querySelector('#name').innerHTML = val

r> }
})
obj.name = '问题不断-IT小鑫'
</script>
下面来实现数据响应式，首先定义一个MVue的类 , 在MVue.js 文件中
class MVue {
// 接收配置对象
constructor(options) {
// 缓存options
this.$options = options
// 数据响应化
this.$data = options.data
// 监听函数
this.observe(this.$data)
}
// 监听函数
observe(val) {
if(!val || typeof val !== 'object'){
return
}
// 遍历该对象
Object.keys(val).forEach(key => {
// 定义响应式，对每一个key(属性)进行定义
this.defineReactive(val,key, val[key])
})
}
// 数据响应化
defineReactive(obj,key, value) {
this.observe(value) // 递归解决数据嵌套
Object.defineProperty(obj,key,{
get(){
return value
},
set(newVal){
// 如果新值和老值相同
if(newVal === value){
return
}
value = newVal
console.log(`${key}属性更新了：${value}`)
}
})
}
}
至此，我们需要在index.html 去调用这个MVue.js
<body>
<script src='./MVue.js'></script>
<script>
const app = new MVue({
data: {
test: '问题不断-IT小鑫',
foo: {
user: '越前龙马'
}
}
})
app.$data.test = '每天都是问题'
app.$data.foo.user = '你还差的远'
</script>
</body>
在浏览器打开控制台可以看到
test属性更新了：每天都是问题
user属性更新了：你还差的远

举报/Report

我的更多文章

下载客户端阅读体验更佳

APP专享

新浪博客

Vue工作机制---数据响应式的实现

分享

我的更多文章

下载客户端阅读体验更佳

疯狂捕鱼