Vue2中给对象添加新属性界面不刷新

这篇具有很好参考价值的文章主要介绍了Vue2中给对象添加新属性界面不刷新。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Vue2中给对象添加新属性界面不刷新?

Vue2.x的响应式

实现原理
  • 对象类型:通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)。
  • 数组类型:通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹)。
Object.defineProperty(data, 'count', {
    get () {}, 
    set () {}
})
存在问题
  • 新增属性、删除属性, 界面不会更新。
  • 直接通过下标修改数组, 界面不会自动更新。
解决方案
  • 使用Vue.setVue.delete或者vm.$setvm.$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,不易读
Vue2中给对象添加新属性界面不刷新

而使用Reflect,因为Reflect会有返回值,直接使用if判断就可以捕获错误了
Vue2中给对象添加新属性界面不刷新文章来源地址https://www.toymoban.com/news/detail-469667.html

到了这里,关于Vue2中给对象添加新属性界面不刷新的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包