Vue 組件強制刷新

Vue組件強制刷新

這篇文章是接上篇文章，本身實現markdown編輯器時，碰到的問題 https://segmentfault.com/a/11...

我左邊輸入了內容，右邊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) + '')
    }
}