Vue3.0 实现数据双向绑定的方法 ?
Vue3.0 是通过Proxy实现的数据双向绑定,Proxy是ES6中新增的一个特性,实现的过程是在目标对象之前设置了一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。用法:ES6 原生提供 Proxy 构造函数,用来生成 Proxy 实例。var proxy = new Proxy(target, handler)target: 是用Pr
Vue3.0 是通过Proxy实现的数据双向绑定,Proxy是ES6中新增的一个特性,实现的过程是在目标对象之前设置了一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。
用法:
ES6 原生提供 Proxy 构造函数,用来生成 Proxy 实例。
var proxy = new Proxy(target, handler)
target: 是用Proxy包装的被代理对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。
handler: 是一个对象,其声明了代理target 的一些操作,其属性是当执行一个操作时定义代理的行为的函数。
`Object.defineProperty` 的问题:
在Vue2中,`Object.defineProperty`无法监控到数组下标的变化,导致直接通过数组的下标给数组设置值,不能实时响应。Object.defineProperty只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。
Vue里,是通过递归以及遍历data对象来实现对数据的监控的,如果属性值也是对象那么需要深度遍历,显然如果能劫持一个完整的对象,不管是对操作性还是性能都会有一个很大的提升。
Proxy的两个优点:可以劫持整个对象,并返回一个新对象,有13种劫持
vue2.0数据双向绑定
示例:vue在初始化时,深层遍历data中的每个属性,通过object.defineProperty为每个属性添加setter,getter。
<input type="text" value="输入框" id="inp">
<br>
<span id="innText">显示输入框内容</span>
<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属性
更多推荐
所有评论(0)