Vue2中给对象添加新属性界面不刷新?
Vue2.x的响应式
实现原理
- 对象类型:通过
Object.defineProperty()
对属性的读取、修改进行拦截(数据劫持)。 - 数组类型:通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹)。
Object.defineProperty(data, 'count', {
get () {},
set () {}
})
存在问题
- 新增属性、删除属性, 界面不会更新。
- 直接通过下标修改数组, 界面不会自动更新。
解决方案
- 使用
Vue.set
、Vue.delete
或者vm.$set
、vm.$delete
这些API
模拟vue2的响应式
//源数据
let person = {
name:'张三',
age:18
}
//模拟Vue2中实现响应式
let p = {}
Object.defineProperty(p,'name',{
configurable:true,
get(){ //有人读取name时调用
return person.name
},
set(value){ //有人修改name时调用
console.log('有人修改了name属性,我发现了,我要去更新界面!')
person.name = value
}
})
Object.defineProperty(p,'age',{
get(){ //有人读取age时调用
return person.age
},
set(value){ //有人修改age时调用
console.log('有人修改了age属性,我发现了,我要去更新界面!')
person.age = value
}
})
vue3的响应式
结论
在vue3中已经不存在上述的问题了
实现原理
- 通过
Proxy
(代理): 拦截对象中任意属性的变化, 包括:属性值的读写、属性的添加、属性的删除等。 - 通过
Reflect
(反射): 对源对象的属性进行操作。
let person = {
name:'YK菌',
age:18
}
const p = new Proxy(person,{
//有人读取p的某个属性时调用
get(target,propName){
console.log(`有人读取了p身上的${propName}属性`)
// return target[propName]
return Reflect.get(target,propName)
},
//有人修改p的某个属性、或给p追加某个属性时调用
set(target,propName,value){
console.log(`有人修改了p身上的${propName}属性,我要去更新界面了!`)
// target[propName] = value
return Reflect.set(target,propName,value)
},
//有人删除p的某个属性时调用
deleteProperty(target,propName){
console.log(`有人删除了p身上的${propName}属性,我要去更新界面了!`)
// return delete target[propName]
return Reflect.deleteProperty(target,propName)
}
})
为什么要使用Reflect,ECMA正在把Object上的方法转移到Reflect上面去
因为要让框架变得更加健壮,所以需要捕获错误,要不然一发生错误就运行不了了
利用Object.defineProperty捕获错误需要使用trycatch,不易读
文章来源:https://www.toymoban.com/news/detail-469667.html
而使用Reflect,因为Reflect会有返回值,直接使用if判断就可以捕获错误了
文章来源地址https://www.toymoban.com/news/detail-469667.html
到了这里,关于Vue2中给对象添加新属性界面不刷新的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!