Vue双向数据绑定：v-model、Object.defineProperty()、$set

v-model详解

v-model本质上是一个语法糖，当绑定在input上后，实际被解析为绑定了value同时绑定了input事件：

<input v-model="name"> 
//实际解析为 
<input :value="name" @input="name=$event.target.value">

Object.defineProperty()详解

用四个字概括为：数据劫持
即劫持一个对象的访问（get）和修改（set）对其进行拦截

Object.defineProperty(obj, prop, descriptor)参数：

• obj：对象
• prop：属性名
• descriptor：属性的描述对象

let json = {}
let name = '张三'
Object.defineProperty(json, 'name', { //监听json对象，对其进行数据劫持
	get() {
		console.log("--进入get方法--")
		return name
	},
	set(newValue) {
		console.log("--进入set方法--")
		name = newValue 
	}
})
console.log(json.name) //访问属性的时候 Object.defineProperty进行了拦截 进入get方法
json.name="李四" //修改属性时 也进行了拦截 进入set方法
console.log(json.name) //访问属性的时候 又进行了拦截 进入get方法

$set：给对象新增属性，并触发视图更新，三个参数(对象，属性，值)

在vue中监听不到动态添加属性 需使用$set强制更新
具体写法：

//person没有age属性的时候 可使用set
this.$set(this.person,'age',20)