Vue.js

• Vue.js/ESLint
• Vue.js/Navigation

Child 偵測 Parent 數值變化方法

computed in child

• 缺點
  • 連動事件時, 當下的 computed 值還在未變更狀態, 只有原始值在已變更狀態
  • 連動事件時, 如果再次引用 computed 數值會發生 function loop

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

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

watcher in 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 端引用次數太多, 會造成藕合度過高不易維護
  • 註解不充分時, 會難以追蹤事件流