vue双向数据绑定的原理

1.v-model的原理

是vue的双向数据绑定指令,v-model其实是一个语法糖,可以将页面上空间输入的值同步到data属性,同时也在更新data绑定的时候,同步到页面

<--原表单中-->
<input type='text' v-model = 'name' />
<--相当于:先给input绑定value属性值为name,input绑定input事件,然后将input的value属性值赋值给name,表单中v-mode是以下代码的语法糖-->
<input type='text' :value = 'name' @input = 'name = $event.target.value' />

2.双向数据绑定的原理

vue双向数据绑定是由数据劫持结合发布者-订阅者模式实现的,通过Object.difineProperty()来劫持对象属性的setter和getter操作.
语法如下:

Object.defineProperty(obj,prop,descriptor)

参数:
obj : 目标对象
prop : 定义或者修改属性的名字
descriptor : 定义或者修改的属性描述

let obj = {} // 目标对象
Object.defineProperty(obj,'name',{
	get:()=>{
		return name
	},
	set:(newName)=>{
		name = newName
	}
})
obj.name = 'xxx' // 调用赋值