vue中 对象增加或删除属性的时候 视图不能响应更新

背景：

定义了一个choosed_grade对象，在某种情况下，需要对该对象的属性执行增加或者删除的操作，并且需要及时的渲染到页面上面。
用下面handleChoosed方法里面的操作，可以实现对choosed_grade对象的操作 ，但是并没有更新渲染到视图上面。如下：

<div class="btn" @click="handleChoosed">选好了</div>

data () {
  return {
    choosed_grade: null,
  }
},
mounted() {
	this.choosed_grade = {};
}

methods: {
	handleChoosed() {
		if(***) {
			this.choosed_grade.grade = 0;
		}
		if(***) {
			delete this.choosed_grade.grade;
		}
	}
}

原因：

Vue 无法探测普通的新增属性以及删除属性

解决办法:

使用 Vue.delete 代替 delete，这个方法主要用于避开Vue不能检测到属性被删除的限制；
使用 this.$set()来向响应式对象中添加一个属性；
这样就可以让vue捕捉到这一变化从而更新视图 操作代码：

methods: {
	handleChoosed() {
		if(***) {
			this.$set(this.choosed_grade, 'term', 0);
		}
		if(***) {
			this.$delete(this.choosed_grade, 'term');
		}
	}
}

然后，结束~~~