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到了麼？