Vue完成新增属性的双向绑定

在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>