vue中新增属性视图问题

我们在进行vue前端开发的时候，可能会遇到这种情况：

首先我们此处双向绑定了一个变量中的属性

<template>
	<div>
		<div>{{ myObject.newProperty }}</div>
	</div>
</template>

然后下面的data只有该对象变量，并无此属性

<script>
export default {
	data() {
		return {
			myObject: {}
		};
	}
</script>

此时我们调用一个方法，给它的新增变量赋值

this.myObject.newProperty = 'ruben';

可以看到外部是并未监听到，视图没有更新，导致我们页面没渲染上去该变量属性的值

此处我们当然可以使用vm.$forceUpdate去强制更新当前页面的视图，更新后固然变量成功绑定

实际上官方文档为我们提供了另一种方法：

vm.$set

该方法可以实现

向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property

简单来说，就是能将新增的变量同样给双向绑定

我们试一试：

this.$set(this.myObject, 'newProperty', 'ruben');

不错，的确更新了视图，完成了新增变量的双向绑定(懒得录制效果做gif啦)