什么是计算属性
- 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护，所以对于任何复杂逻辑，你都应当使用计算属性
- 说白了，计算属性能够实现一定的复杂逻辑的处理，并返回处理结果
计算属性的定义
- 使用computed结构定义计算属性
- 定义为函数的形式(实现业务处理并返回处理结果)
computed:{
// 这个成员可实现业务处理，所以它是一个函数形式
计算属性名称(){
// 业务处理
return 结果
}
}
使用计算属性
<td>{{计算属性名称}}</td>
计算属性的特点
- 使用computed来定义计算属性，它是一个单独的结构
- 它定义的时候看上去是一个函数，使用起来像使用属性一样,你可以像使用data中定义的属性一样来使用计算属性
- 只要计算属性中所依赖的数据发生了变化 ，就会自动的触发计算属性
- 当我们执行复杂运算的时候，同时结果需要进行复用，那么计算属性将是非常好的选择
- 计算属性不能监听异步操作中的数据变化
侦听器
什么是vue中的侦听器
- watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。例如，监视用户名的变化并发起请求，判断用户名是否可用。
- 侦听器，也称为侦听属性。它可以监听指定的属性值的变化 ，只要属性值发生了变化 就会自动的触发相应的侦听器
- 相比之下，它比计算属性更通用，特别是在有异步操作的场景下
侦听器的定义及使用
侦听器的定义
- 使用watch结构定义侦听器
- 定义为函数的形式,且函数名称必须和你想侦听的属性名称完全一致
watch:{
// 定义侦听函数
想侦听的属性名称(新值，旧值){
// 业务处理
}
}
侦听器的使用
- 不需要人为调用，也不能人为调用
- 只要侦听的数据发生变化，就会自动的触发
- 如果想获取到处理结果，一般是将结果赋值给其它的成员
侦听器的其它选项：
这个时候需要注意侦听器需要定义为对象的形式，以便让我们能够添加选项配置
- immediate :
immediate:为true默认调用一次 - deep:
deep: true :可以监听指定对象的属性值的变化，任何属性值发生了变化都会触发侦听器
侦听器的特点(与计算属性的异同)
- 它的命名不能随意，必须和你想侦听的属性名称完全一致
- 它不能手动调用，它是自动触发
- 侦听器侧重于监听单个数据的变化，最终执行特定的业务处理，不需要有任何返回值，如果有需要一般是将结果赋值给另外一个变量
- 它可以侦听异步操作中数据的变化
