计算属性computed :
1、支持缓存，只有依赖数据发生改变，才会重新进行计算
2、不支持异步，当computed内有异步操作时无效，无法监听数据的变化
3、computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的， 也就是基于data中声明过的数据通过计算得到的
4、如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
5、如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。
<div id="example">
{{ message.split('').reverse().join('') + num }}
</div>
虽然vue可以在template模版中写js逻辑，但是简单的逻辑可以看的很清楚，如果逻辑复杂了看起来了就很麻烦，所以当有值需要做一定的操作时我们可以在computed计算属性里面。
<template>
<div class="home">
<div>
<p>{{ reversedMessage }}</p>
</div>
</div>
</template>
<script>
export default {
name: 'home',
data() {
return {
message: 'hello world',
num: 1
}
},
// 計算属性
computed: {
reversedMessage() {
return this.message.split('').reverse().join('') + this.num
}
}
}
</script>
计算属性就是当一个值或者是多个值有逻辑操作时可以用，把最终的结果赋值给一个变量进行渲染，computed是通过几个数据的变化，来影响一个数据。
计算属性watch :
<template>
<div class="home">
<div>
<p>监听：{{number}}</p>
</div>
</div>
</template>
<script>
export default {
name: 'home',
data() {
return {
number: 1
}
},
watch: {
number (newVal, oldVal) {
console.log('新值', newVal) // 新值 100
console.log('旧值 ', oldVal) // 旧值 1
}
},
created() {
setTimeout(() => {
this.number = 100
}, 2000)
}
}
</script>
watch一般用来监听属性的变化（也可以用来监听计算属性函数），并做一些逻辑。
watch，是可以一个数据的变化，去影响多个数据。
