在vue框架中,一般情况下,我们为某一个对象添加上一个属性,直接赋值就可以了,代码如下:
<div class="box" id="box">
<ul>
<li>
<p>{{obj.name}}</p>
<p>{{obj.age}}</p>
<p>{{obj.sex}}</p>
</li>
</ul>
</div>
<script type="text/javascript">
let vm=new Vue({
el:'#box',
data:{
obj:{
name:'王',
age:19
}
}
})
vm.obj.sex='男';
</script>
我们会发现,虽然obj这个对象里面的sex属性有了,但是在标签上并没有显示,那这是为什么呢?这就涉及到了vue框架实现数据双向绑定的原理了,简单理解一下:
vue在创建vm的时候,会将数据配置到实例中,然后通过Object.defineProperty方法,为数据动态的添加getter与setter方法。 当获取数据的时候,会触发对应的getter方法,当设置数据的时候,触发对应的setter方法。
然后当setter方法触发完成的时候,内部会进一步触发watcher,当数据改变了,视图则更新操作完毕。
上面代码中,设置数据的时候和获取数据的时候,我们并没有给其绑定getter方法和setter方法,所以不会产生数据的双向绑定,所以标签的sex属性就不会动态的更新出来。
Vue为了解决这个问题,为我们提供了set()方法,代码如下;
<div class="box" id="box">
<ul>
<li>
<p>{{obj.name}}</p>
<p>{{obj.age}}</p>
<p>{{obj.sex}}</p>
</li>
</ul>
</div>
<script type="text/javascript">
let vm=new Vue({
el:'#box',
data:{
obj:{
name:'王',
age:19
}
}
})
// vm.obj.sex='男'; //这样的设置,产生数据不能完成双向绑定
Vue.set(vm.obj,'sex','男') //这样就能设置上新的属性,并完成双向绑定
console.log(vm.obj)
</script>