VUE的this.$forceUpdate()的使用场景及原理

作用

迫使VUE实例重新渲染。注意：它仅仅影响实例本身和插入插槽内容的子组件，而不是所有的子组件。

使用场景：

1. 路由切换时，页面数据比较复杂
2. 改变多维数组里面的数据
3. 在vue框架中，如果data中有一个变量:age，修改它，页面会自动更新。 但如果data中的变量为数组或对象，我们直接去给某个对象或数组添加属性，页面是识别不到的

原理

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

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