vue中forceupdate的使用

vue中$forceUpdate的使用

登录 2019-03-28 简单总浏览：46今日浏览：4

vue中的$forceUpdate是强制更新的意思，之前没太怎么用过，最近看了下，觉得还挺有意思的，一起来看看是咋用的。

深结构数据

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

=> vue无法感知的数据变动(二维码)

上面的demo就是一个对象数组，我们尝试直接给某个item增加一个属性，发现页面上没有效果；直接将length变成0来清空数组，也没有效果，关键代码如下：

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

隐藏代码

其实呢，上面的写法没有效果，是因为没有按照vue的规范去写，因为vue文档里面写了，对于深层的，最好用$set方法，这样vue就可以知道发生了变化，同时vue也不建议直接修改length，可以给一个空数组来置空。

=> 深层用$set去设置(二维码)

上面是我们按照vue的规范去写的，是可以实现变化的，关键代码如下：

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

可是如果我们不想利用$set去设置，非要按照我们第一种方式去写，可以实现么？答案是可以的，就是利用$forceUpdate了，因为你修改了数据，但是页面层没有变动，说明数据本身是被修改了，但是vue没有监听到而已，用$forceUpdate就相当于按照最新数据给渲染一下。

=> 利用$forceUpdate更新(二维码)

关键代码如下：

1. change: function(index) {
2. this.list[index].sex = '男';
3. this.$forceUpdate();
4. },
5. clear: function() {
6. this.list.length = 0;
7. this.$forceUpdate();
8. }

$children

$children表示当前页面的组件个数，但是如果直接在页面上引用{{$children}}，往往得不到正确的结果：

=> 如何显示$children个数(二维码)

这个和vue内部的实现机制有关，（vue不同版本可能不一定有此问题），可以看到，当我们用$forceUpdate之后，就会得到正确的结果。当然，一般我们也不会这么去使用，我们可以在data里面定义一个变量，在mounted之后给变量赋值this.$children.length；或者直接在mounted之后使用$forceUpdate强制刷新。