Vue 最优组件强制刷新

Vue组件强制刷新

这篇文章是接上篇文章，自己实现markdown编辑器时，碰到的问题
https://www.charmcode.cn/article/2020-08-02_vue_editor

我左边输入了内容，右边markdown组件实施更新

强制刷新组件

Vue官网 key的描述
可以查看Vue官网，关于key的描述

以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

Vue中的虚拟dom树也是根据key的变化，来判断是否刷新组件，这一点很重要,所以我们就给想要强制刷新的组件加一个key。

然后定义一个方法，专门改变key的值，就可以强制刷新组件，这种改变key的方式效率是最高的。

如下例子

<demo-component :key="demoKey" />

data() {
  return {
    // 这里随便赋值
    demoKey: 0
  }
},
method: {
    // 改变key重新渲染, 想要重新渲染的时候就调用这个方法
    forceRerender() {
      this.demoKey ='demo-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
    }
}