vue3.0双向数据绑定Proxy:
Vue3.0中的响应式采用了ES6中的Proxy方法。
Proxy
的监听是针对一个对象的,那么对这个对象的所有操作会进入监听操作,这就完全可以代理所有属性了
Proxy 对象用于定义基本操作的自定义行为(如属性查找、赋值、枚举、函数调用等)
语法:
const p = new Proxy(target, handler)
参数target
表示要使用Proxy
包装的对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)
参数handler
是一个通常以函数作为属性的对象,各属性中的函数分别定义了在执行各种操作时代理p
的行为
let obj = {
a: 1,
b: 2
}
const proxy = new Proxy(obj, {
get: function(target, prop, receiver) {
return prop in target ? target[prop] : 0
},
set: function(target, prop, value, receiver) {
target[prop] = 666
}
})
console.log(proxy.a) // 1
console.log(proxy.c) // 0
proxy.a = 10
console.log(proxy.a) // 666
obj.b = 10
console.log(proxy.b) // 不是666 而是10
以上代码中obj是我们要代理的目标对象,get,set方法是参数handler的两个属性,具体如下:
handler.get()接收三个参数,第一个参数target为代理的目标对象,第二个参数prop是代理的目标对象的属性,第三个参数是Proxy或者继承Proxy的对象,通常是proxy本身。
handler.set()接收四个参数,其中三个参数都与get方法相同,唯独多出来一个value表示新的属性值。
上述代码表示当访问proxy的属性时,进行拦截判断,该属性是否是目标对象的属性,如果是那么就将其值返回出来,否则就返回0。
当对proxy上的属性进行重写时,将重写的该属性赋值为666。
注意: 此时对数据的劫持,只是劫持了代理对象proxy
,而跟原对象obj
没有任何关系,对obj
进行操作,也不会监听到。
用proxy
实现一个简易版的数据响应:
<body>
<h2 id="app"></h2>
<input id="input" type="text" />
</body>
let app = document.getElementById('app')
let input = document.getElementById('input')
let obj = { // 源数据
text:'hello world'
}
let proxy = new Proxy(obj, {
set: function(target, prop, value){ // input事件触发进行劫持,触发update方法
target[prop] = value
update(value)
}
})
function update(value){ // update方法用于同步dom更新
app.innerHTML = value
input.value = value
}
input.addEventListener('input',function(e){ // 监听input数据变化,并修改proxy的值
proxy.text = e.target.value
})
proxy.text = obj.text // 初始化源数据
Vue2双向数据绑定存在的问题:
关于对象: Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对property执行 getter/setter转化,所以property必须在 data对象上存在才能让 Vue 将它转换为响应式的。
关于数组: Vue 不能检测以下数组的变动:
当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:vm.items.length = newLength
在官网深入响应式原理一章有较详细阐述,针对以上两种情况解决方法,官网也有给出答案,那就是使用set
方法。
两者区别:
Object.defineProperty
只能遍历对象属性进行劫持
function observe(obj) {
if (typeof obj !== 'object' || obj == null) {
return
}
Object.keys(obj).forEach(key => {
defineReactive(obj, key, obj[key])
})
}
Proxy
直接可以劫持整个对象,并返回一个新对象,我们可以只操作新的对象达到响应式目的
function reactive(obj) {
if (typeof obj !== 'object' && obj != null) {
return obj
}
// Proxy相当于在对象外层加拦截
const observed = new Proxy(obj, {
get(target, key, receiver) {
const res = Reflect.get(target, key, receiver)
console.log(`获取${key}:${res}`)
return res
},
set(target, key, value, receiver) {
const res = Reflect.set(target, key, value, receiver)
console.log(`设置${key}:${value}`)
return res
},
deleteProperty(target, key) {
const res = Reflect.deleteProperty(target, key)
console.log(`删除${key}:${res}`)
return res
}
})
return observed
}
Proxy
不兼容IE,也没有 polyfill
, defineProperty
能支持到IE9