vue双向数据绑定原理

本文介绍了前端开发中的MVVM模式,重点讲解了Vue.js如何实现双向数据绑定,利用数据劫持和发布者-订阅者模式,通过Object.defineProperty()监听数据变化,更新视图。同时阐述了数据描述符在这一过程中的作用,确保视图与数据的实时同步。
摘要由CSDN通过智能技术生成

1、关于双向数据绑定

在前端开发中采用MVVM模式时,通常需要编写代码,将从服务器获取的数据进行“渲染”,展现到视图上。每当数据有变更时,会再次进行渲染,从而更新视图,使得视图与数据保持一致。
另一方面,页面也会通过用户的交互,产生状态、数据的变化,这个时候,将视图对数据的更新同步到数据和后台服务器。

2、如何回答

vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。并且,由于是在不同的数据上触发同步,可以精确的将变更发送给绑定的视图,而不是对所有的数据都执行一次检测。

3、Object.defineProperty()
.Object.defineProperty() 方法 直接在一个对象上定义一个新的属性
他有三个参数
.Object.defineProperty(obj,prop,descriptor)
obj 是定义属性的对象
prop 是定义的属性名
descriptor 属性描述符
1.数据描述符
configurable 是否重新配置(删除) 布尔
enumerable 是否可枚举 布尔 (for in for of object.keys())
value 默认值
writable 是否可写 布尔
2.访问(存取)描述符
get set
它的返回值是被操作的对象 也就是obj参数
有两个回调函数 get set 访问(存取)描述符

Object.defineProperty(obj,prop,{
	configurable:false,
	enumerable:false,
	writable:false,
	getfunction(){
		//获取数据
		return val
	}setfunction(val){
		//设置数据
	}})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值