vue中computed（計算屬性）和watch在實現父子組件props同步時的實際區分

vue中computed和watch的對比是一個很有意思的話題。
看過官網教程以后，我們往往更傾向多使用computed。computed優點很多，卻在某些時候不太適用。
今天我們就稍微討論一下，當我們在編寫一個子組件時，需要同步父子組件的屬性props時，computed與watch的選用。
舉個例子好了。
首先看computed：

props: {
  letter: {
    type: String,
    default: a
  }
},

computed: {
  innerLetter: {
    get () {
      return this.letter;
    }
    set (value) {
      this.$emit('change-letter', value);
    }
  }
}

再來看看watch：

props: {
  letter: {
    type: String,
    default: a
  }
},

data () {
  return {
    innerLetter: this.letter
  }
}

watch: {
  letter (value) {
    this.innerLetter = letter;
  }
}

methods: {
  changeLetter (value) {
    this.$emit('change-letter', value);
  }
}

兩種寫法要實現的功能都是要實現向子組件傳入的props能夠與父組件保持一致，這兩種寫法都很常見。
我們來看看他們的區別是什么：

1. computed寫法更簡便，innerLetter作為letter的全權代理在子組件里可以像一個普通變量一樣取值賦值。

2. computed寫法，子組件內view的渲染，完全依靠父組件傳入的props。如果父組件的props不響應子組件發出的change-letter事件，則子組件對innerLetter的賦值就失效了。

3. computed寫法，子組件的渲染依賴父組件對change-letter的響應，所以當編寫強交互組件，或獨立打包的外部plugin時，應謹慎使用或盡量不使用。

4. watch寫法更復雜，也更靈活，innerLetter作為一個data屬性，可以在子組件內部隨意改變其值，view會直接實時同步變化，父組件也通過接收change-letter事件來進行同步。

5. watch寫法可以自定義change-letter的時機，當子組件innerLetter需要響應mousemove等密集事件時，子組件的view層渲染更實時，子組件也可以通過過濾來減少change-letter事件發送的頻率。

6. watch寫法，在子組件僅read父組件的值，而不需要對其值進行修改時，完全可以用computed替代，computed性能更好，寫法更簡單。

ok，兩種寫法的區別你get到了么？