computed也就是计算属性，它可以帮助我们将在模板中的一些稍微复杂的逻辑计算放回到js代码中，方便理解与修改维护
官网中给出的例子：这里展示的数据是经过message和number两个属性经过变换合成的
<div id="example">
{{ message.split('').reverse().join('') + number }}
</div>
虽然这行js代码很简单，但是如果这样的代码写多了，维护起来会很麻烦，所以类似这样的需求，我们一般将其写入computed计算属性中
官网给出的示例代码如下：
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'，
number:123
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')+number
}
}
})
在computed中定义的每一个计算属性，都会被缓存起来，只有当计算属性里面依赖的一个或多个属性变化了，才会重新计算当前计算属性的值。上面的代码片段中，在reversedMessage中，它依赖了message和number这两个属性，一旦其中一个变化了，reversedMessage会立刻重新计算输出新值。
watch是属性监听器，一般用来监听属性的变化（也可以用来监听计算属性函数），并做一些逻辑。
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
<template>
<div>
<p>{{ this.number }}</p>
</div>
</template>
<script>
export default {
name: 'test1',
data () {
return {
number: 1
}
},
created () {
setTimeout(() => {
this.number = 100
}, 2000)
},
watch: {
number (newVal, oldVal) {
console.log('number has changed: ', newVal)
}
}
}
</script>
我们在watch中监听了number属性，并且在实例创建后2s执行对number属性的值的更改。我们可以在控制台中看到2s后打印了
number has changed: 100