每次附加特定元素時 Vue.js 觸發函數

Question

每次將<canvas>元素（重新）附加到 Vue.js 中時，如何觸發函數？

模板：

<div class="article" v-if="displayArticle">
    [...]
    <div v-if="sample">
        <canvas></canvas>
    </div>
</div>

我希望每次刪除 canvas 元素然后從 DOM 重新附加時觸發一個特定函數，例如，當sample變量設置為false然后設置為true時，我想調用一個特定函數，該函數將在帆布。

Answer 1

在sample上創建一個觀察者。 例子：

export default {
  el: '#yourEl',
  data() {
    return {
      sample: false,
      /* other vm data properties */
    }
  },
  watch: {
    sample(newVal, oldVal) {
      /* code that is executed whenever sample changes 
         the current value of sample gets passed in newVal, 
         the value it had before the change occurred comes in as oldVal
      */
    }
  }
}

觀察者只是Vue實例的watch屬性中的一個命名函數。 按照慣例，它使用與被監視屬性相同的名稱。

參考：

https://v2.vuejs.org/v2/guide/computed.html#Watchers