v-model出现object
时间: 2023-11-09 11:45:30 浏览: 32
v-model本质上是一个语法糖,当绑定在input上后,实际被解析为绑定了value同时绑定了input事件。在Vue中,v-model可以实现双向数据绑定,即数据的改变会同步更新到视图,视图的改变也会同步更新到数据。
实现双向数据绑定的关键是通过Object.defineProperty方法对对象的属性进行数据劫持。在Vue中,当使用v-model进行双向数据绑定时,会通过Object.defineProperty来劫持数据的访问和修改。
具体实现过程如下:
1. 使用Object.defineProperty方法对对象的属性进行劫持,即在get方法中获取属性的值,在set方法中修改属性的值。
2. 当属性被访问时,会触发get方法,并返回属性的值。当属性被修改时,会触发set方法,并对属性的值进行修改。
3. 当属性的值发生变化时,会触发更新方法(update),从而更新相关的节点,实现视图的更新。
举个例子来说明:
```javascript
let json = {}
let name = '张三'
Object.defineProperty(json, 'name', {
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方法
```
除了使用Object.defineProperty来实现双向数据绑定,Vue还提供了$set方法来给对象新增属性,并触发视图更新。$set方法接收三个参数,分别是对象、属性和值。