Vue.js: Difference between revisions

From Fundamental Ramen
Jump to navigation Jump to search
Line 5: Line 5:


=== computed in child ===
=== computed in child ===
* 缺點
** 連動事件時, 當下的值還在未變更狀態
** 連動事件時, 可能會發生 function loop


<source lang="js">
computed: {
  lifeCycleState () {
    setTimeout(function () { this.onChangeState() }, 0.01)
    return this.value
  }
}
</source>


=== watcher in child ===
=== watcher in child ===

Revision as of 08:19, 30 June 2021

Child 偵測 Parent 數值變化方法

computed in child

  • 缺點
    • 連動事件時, 當下的值還在未變更狀態
    • 連動事件時, 可能會發生 function loop
computed: {
  lifeCycleState () {
    setTimeout(function () { this.onChangeState() }, 0.01)
    return this.value
  }
}

watcher in child

  • 缺點
    • 如果對象是 property, 需要 immediate: true
    • 如果對象是 property, oldVal 一定是 undefined, 無法取得上一個 tick 的值
    • 如果對象是物件, 需要 deep: true, 但是效能會大幅下降
watcher: {
  foo: {
    handler: (newVal, oldVal) {
      // ...
    },
    immediate: true,
    deep: true
  }
}

this.$refs.xxx in server