$forceUpdate解析

在vue的开发过程中，数据的绑定通常来说都不用我们操心，例如在​​data​​中有一个​​msg​​的变量，只要修改它，那么在页面上，​​msg​​的内容就会自动发生变化。但是如果对于一个复杂的对象，例如一个对象数组，直接去给数组上某一个元素增加属性，或者直接把数组的​​length​​变成0，vue可能就无法知道发生了改变。这个其实就是考验对于双向绑定的更进一步的理解应用了。
在Vue中，双向绑定属于自动档，然而在特定的情况下，需要手动触发“刷新”操作，目前有四种方案可以选择：

• 刷新整个页面
• 使用v-if标记
• 使用内置的forceUpdate方法
• 使用key-changing优化组件

方案分析

本次文章主要重点在于分析​​forceUpdate​​这个方法，后续有机会再来分析​​key-changing​​。

forceUpdate

该方案是比较好的一种方式，比如说我们尝试直接给某个​​object​​增加一个属性，发现页面上没有效果；直接将length变成0来清空数组，也没有效果，

关键代码如下：

change: function(index) {
// 增加性格属性
this.girls[idx].character = 'lovely';
},
clear: function() {
// 清空数组
this.girls.length = 0;
}

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

关键代码如下：

change: function(index) {
// 增加性格属性
this.$set(this.girls[idx],'character','lovely')
},
clear: function() {
// 清空数组
this.girls = [];
}

如果我们不想利用​​$set​​去设置，非要按照我们第一种方式去写，可以实现么？可以的，就是利用​​$forceUpdate​​，此时修改了数据，然而页面层没有变动，之后通过日志打印的方式确认数据是否有修改过，之后再确认有没有监听到，用​​$forceUpdate​​就相当于按照最新数据给渲染一下。

关键代码如下：

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

这种做法实际上并不推荐，官方说如果你现在的场景需要用​​forceUpdate​​方法 ,那么99%是你的操作有问题，如上data里不显示声明对象的属性，之后添加属性时正确的做法时用 ​​$set()​​方法，所以​​forceUpdate​​请慎用。
该同等效果的：window.location.reload()

本质

在vue的官方文档中有说明到这个是一个强制刷新的api，但很少用到，除非是遇到了需要实时响应组件状态的时候

Force the component instance to re-render.

This should be rarely needed given Vue's fully automatic reactivity system. The only cases where you may need it is when you have explicitly created non-reactive component state using advanced reactivity APIs.

实现原理

Vue.prototype.$forceUpdate = function () {
const vm: Component = this
if (vm._watcher) {
vm._watcher.update()
}
}

实例需要重新渲染是在依赖发生变化的时候会通知​​watcher​​，然后通知​​watcher​​来调用​​update​​方法，就是这么简单。

分析

forceUpdate就是重新render

• 有些变量不在​​ state​​上，但是你又想达到这个变量更新的时候，重新（render），从而渲染虚拟DOM。

• 注意到这个时候并不是重新加载组件。
• 结合vue的生命周期，调用​​$forceUpdate​​后只会触发​​beforeUpdate​​和​​updated​​这两个钩子函数，不会触发其他的钩子函数。它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件，即强制更新因某些原因并未渲染到页面的，已经改变的，应该被渲染到页面的数据

• ​​state​​里的某个变量层次太深，更新的时候没有自动触发​​ render​​。

这些时候都可以手动调用 forceUpdate 自动触发 render 。所以建议使用​​ immutable​​来操作​​ state​​ ，​​redux​​ 等​​ flux​​ 架构来管理​​ state​​。

刷新页面

这个方案是挺low的，本质上是刷新页面

this.$router.go(0)

使用v-if标记

如果是刷新某个子组件，则可以通过​​v-if​​指令实现。我们知道，当​​v-if​​的值发生变化时，组件都会被重新渲染一遍。因此，利用​​v-if​​指令的特性，可以达到强制刷新组件的目的。

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

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>