2021-8-13 vue中$forceUpdate()强制数据

vue中$forceUpdate()强制数据，渲染数据，针对复杂的数据结构。

当我们使用v-model的时候，可以实现双向绑定。但是如果对于一个复杂的对象，例如一个对象数组，你直接去给数组上某一个元素增加属性，或者直接把数组的length变成0，vue就无法知道发生了改变。

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

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

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

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

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

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

关键代码如下：

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

$children

KaTeX parse error: Expected '}', got 'EOF' at end of input: …但是如果直接在页面上引用 {{children}}，往往得不到正确的结果;

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

链接: 链接.

Vue的双向绑定属于自动档；在特定的情况下，需要手动触发“刷新”操作，目前有四种方案可以选择：

1，刷新整个页面（最low的，可以借助route机制，不推荐）,

this.$router.go(0)

2，使用v-if标记（比较low的，有时候不生效，不推荐）
如果是刷新某个子组件，则可以通过v-if指令实现。我们知道，当v-if的值发生变化时，组件都会被重新渲染一遍。因此，利用v-if指令的特性，可以达到强制刷新组件的目的。

<template>
    <comp v-if="refresh"></comp>
    <button @click="refreshComp()">刷新comp组件</button>
</template>
<script>
import comp from '@/views/comp.vue'
export default {
    name: 'parentComp',
    data() {
        return {
            refresh: true
        }
    },
    methods: {
        refreshComp() {
            // 移除组件
            this.refresh = false
            // 在组件移除后，重新渲染组件
            // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
            this.$nextTick(() => {
                this.refresh = true
            })
        }
    }
}

3，使用内置的forceUpdate方法（较好的）
组件内置$forceUpdate方法，如果不能强制刷新，尝试使用前在配置中启用。
举例： import Vue from ‘vue’
Vue.forceUpdate()

<template>
  <div>
    <button @click="handleUpdateClick()">Refresh当前组件</button>
  </div>
</template>
export default {
  methods: {
    handleUpdateClick() {
      // built-in
      this.$forceUpdate()
    }
  }
}

4，使用key-changing优化组件（最好的）
vue使用key标记组件身份，当key改变时就是释放原始组件，重新加载新的组件。

<template>
  <div>
    <span :key="key"></span>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        key: 0
      }
    },
    methods: {
      handleUpdateClick() {
        this.key += 1 // 或者 this.key = new Date();
      }
    }
  }
</script>

链接: 链接.