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能够与父组件保持一致，这两种写法都很常见。
我们来看看他们的区别是什么：
computed写法更简便，innerLetter作为letter的全权代理在子组件里可以像一个普通变量一样取值赋值。
computed写法，子组件内view的渲染，完全依靠父组件传入的props。如果父组件的props不响应子组件发出的change-letter事件，则子组件对innerLetter的赋值就失效了。
computed写法，子组件的渲染依赖父组件对change-letter的响应，所以当编写强交互组件，或独立打包的外部plugin时，应谨慎使用或尽量不使用。
watch写法更复杂，也更灵活，innerLetter作为一个data属性，可以在子组件内部随意改变其值，view会直接实时同步变化，父组件也通过接收change-letter事件来进行同步。
watch写法可以自定义change-letter的时机，当子组件innerLetter需要响应mousemove等密集事件时，子组件的view层渲染更实时，子组件也可以通过过滤来减少change-letter事件发送的频率。
watch写法，在子组件仅read父组件的值，而不需要对其值进行修改时，完全可以用computed替代，computed性能更好，写法更简单。
ok，两种写法的区别你get到了么？