提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
vue3.0将响应式改为使用proxy实现,相比vue2.0的defineProperty更加强大
一、vue2.0数据双向绑定
示例:vue在初始化时,深层遍历data中的每个属性,通过object.defineProperty为每个属性添加setter,getter。
二、简单实现
1.html
<input type="text" value="输入框" id="inp">
<br>
<span id="innText">显示输入框内容</span>
2.js
<script>
const inp = document.getElementById('inp')
const innText = document.getElementById('innText')
let obj = {name: '',age:18}
let newObj = JSON.parse(JSON.stringify(obj)) // 防止在get()里return 时死循环
for (const key in obj) {
if (Object.hasOwnProperty.call(obj, key)) {
Object.defineProperty(obj, key, {
get(){
return newObj[key]
},
set(newVal){
if(newObj[key] == newVal) return
newObj[key]= newVal
observer()
},
})
}
}
//更改视图内容
function observer() {
inp.value = obj.name
innText.innerHTML = obj.name
}
// 数据驱动视图
setTimeout(() => {
obj.name = '6666'
}, 1000);
inp.oninput = function(){
obj.name = inp.value
}
</script>
一秒后
vue3.0 是通过Proxy 实现的
简单实现
let obj = {age:18}
obj = new Proxy(obj, {
get(target, property){
return target[property]
},
set(target, property, value){
if(target[property] === value) return
target[property] = value
observer()
}
})
总结
vue3.0采用的proxy劫持的是整个对象,相比vue2.0defineProperty,能够监听动态新增的属性,可以监听数组的索引和length属性。