vue中的$forceUpdate强制更新用法

深结构数据

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

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

?

1 2 3 4 5 6

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

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

?

1 2 3 4 5 6

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

　　

3.这种是我们要说的 this.$forceUpdate()  有没有感觉更方便一些了

?

1 2 3 4 5 6 7 8

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