vue中computed和watch的對比是一個很有意思的話題。
看過官網(wǎng)教程以后，我們往往更傾向多使用computed。computed優(yōu)點很多，卻在某些時候不太適用。
今天我們就稍微討論一下，當(dāng)我們在編寫一個子組件時，需要同步父子組件的屬性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);} }

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

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

computed寫法，子組件內(nèi)view的渲染，完全依靠父組件傳入的props。如果父組件的props不響應(yīng)子組件發(fā)出的change-letter事件，則子組件對innerLetter的賦值就失效了。

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

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

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

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

ok，兩種寫法的區(qū)別你get到了么？

轉(zhuǎn)載于:https://www.cnblogs.com/yinzhida/p/10673952.html

總結(jié)

以上是生活随笔為你收集整理的vue中computed（计算属性）和watch在实现父子组件props同步时的实际区分的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。