Vue中使用this.$forceUpdate()强制刷新渲染的用法

用于深结构数据

首先我们知道在vue中，数据的绑定都不用我们操心，例如在data中有一个msg的变量，你修改它，那么在页面上，msg的内容就会自动发生变化。但是如果对于一个复杂的对象，例如一个对象数组，你直接去给数组上某一个元素增加属性，或者直接把数组的length变成0，vue就无法知道发生了改变。

1.相信大家也遇到过，实际上是赋值的 界面上并不渲染

change: function(index) {//增加性别属性
    this.list[index].sex = '男';
},
clear: function() {//清空数组
    this.list.length = 0;
}

2.　this.$set可解决这个问题 vue的规范 文档里面都有提到过

change: function(index) {//增加性别属性
    this.$set(this.list[index],'sex','男')
},
clear: function() {//清空数组
    this.list=[];
}

3.这种是我们要说的 this.$forceUpdate()  对比第二种方法较方便，推荐使用

change: function(index) {
    this.list[index].sex = '男';
    this.$forceUpdate();
},
clear: function() {
    this.list.length = 0;
    this.$forceUpdate();
}