Computed计算属性
为什么要使用computed而不是method？
方式的结果完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 computed计算的值 还没有发生改变，多次访问 comuputed中的计算属性 计算属性会立即返回之前的计算结果，而不必再次执行函数。
computed中的getter：
computed 的属性可以被视为是 data 一样，可以读取和设值，因此在 computed 中可以分成 getter（读取） 和 setter（设值），一般情况下是没有 setter 的，computed 预设只有 getter ，也就是只能读取，不能改变设值。
vue.js计算属性默认只有 getter，因为是默认值所以我们也常常省略不写,但在TS代码风格的Vue中需要写get。
JS：
export default {
computed: {
money() {
return this.count * this.price;
},
},
};
TS:
```
import { Component, Vue } from "vue-property-decorator";
@Component
export default class Home extends Vue {
private get money(): number {
return this.count * this.price;
}
}
Watch侦听属性：
通过watch提供方法来响应数据变化，当执行异步，或开销较大操作的时候往往使用Watch
当被监听属性的值发生变化的时候执行
简单监听：
**语法:\
watch: {**
**// newVal: 当前最新值\
// oldVal: 上一刻的值\
变量名 (newVal, oldVal){\
// 变量名对应值改变这里自动触发\
}\
}**
深度监听：
语法:
watch: {
"要侦听的属性名": {
immediate: true, // 立即执行
deep: true, // 深度侦听复杂类型内变化
handler (newVal, oldVal) {
}
}
}
example：
<template>
<div>
<input type="text" v-model="user.name">
<input type="text" v-model="user.age">
</div>
</template>
<script>
export default {
data(){
return {
user: {
name: "",
age: 0
}
}
},
// 目标: 侦听对象
watch: {
// 第一种：监听整个对象，对象里的每个属性值的变化都会执行handler
// 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的
user: {
handler(newVal, oldVal){
console.log(newVal, oldVal);
},
deep: true,
immediate: true
}
}
// 目标: 精确侦听对象中的某个值
watch: {
// 第二种方式：监听对象的某个属性，被监听的属性值发生变化就会执行函数
// 函数执行后，获取的 newVal 值和 oldVal 值不一样
'user.name': {
handler(newVal, oldVal){
console.log(newVal, oldVal);
},
deep: true,
immediate: true
}
}
}
</script>
1.固定方法触发，侦听函数名必须叫handler
2.deep是开启深度监听
3.immediate立即侦听，当页面初始化的时候立即执行
