Vue.js

• Vue.js/ESLint
• Vue.js/Navigation
• Vue.js/Unsafe Ports

取得 DOM 數值

原生 DOM Node

this.$refs.xxx.prop

Vue Component

this.$refs.xxx.$el.prop

Child 偵測 Parent 數值變化方法

computed in child

• 優點
  • 只需要關注 child, 藕合度低可讀性高
  • 使用上比 watcher 容易, 對像是物件也適用
• 缺點
  • 連動事件時, 當下的 computed 值還在未變更狀態, 只有原始值在已變更狀態
  • 連動事件時, 如果再次引用 computed 數值會發生 function loop
  • 連動事件時, 事件內指適合引用原始值
  • template 與 script 都沒用到 computed 值, 就無法觸發連動事件

computed: {
  lifeCycleState () {
    this.onChangeState()
    return this.value
  }
}

methods: {
  onChangeState () {
    console.log(this.value)
  }
}

watcher in child

• 優點
  • 只需要關注 child, 藕合度低可讀性高
• 缺點
  • 如果對象是 property, 需要 immediate: true
  • 如果對象是 property, oldVal 一定是 undefined, 無法取得上一個 tick 的值
  • 如果對象是物件, 需要 deep: true 才能有效偵測變更, 但是效能會大幅下降

watcher: {
  value: {
    handler: (newVal, oldVal) {
      // ...
    },
    immediate: true,
    deep: true
  }
}

this.$refs.xxx in parent

• 優點
  • 適用所有資料型態
  • 容易降低重複執行次數, 效能較高
• 缺點
  • 如果在 parent 端引用次數太多, 會造成藕合度過高不易維護
  • 註解不充分時, 會難以追蹤事件流
  • 相關程式散落在 parent template, parent script, child script 可讀性稍差
  • 事後傳入的資料與 property 原先的資料有差異時, child 在輸出上需要謹慎處理