vue计算属性与侦听器

什么是计算属性

• 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护，所以对于任何复杂逻辑，你都应当使用计算属性
• 说白了，计算属性能够实现一定的复杂逻辑的处理，并返回处理结果

计算属性的定义

• 使用computed结构定义计算属性
• 定义为函数的形式(实现业务处理并返回处理结果)

computed:{
    // 这个成员可实现业务处理，所以它是一个函数形式
    计算属性名称(){
        // 业务处理
        return 结果
    }
}

使用计算属性

<td>{{计算属性名称}}</td>

计算属性的特点

• 使用computed来定义计算属性，它是一个单独的结构
• 它定义的时候看上去是一个函数，使用起来像使用属性一样,你可以像使用data中定义的属性一样来使用计算属性
• 只要计算属性中所依赖的数据发生了变化 ，就会自动的触发计算属性
• 当我们执行复杂运算的时候，同时结果需要进行复用，那么计算属性将是非常好的选择
• 计算属性不能监听异步操作中的数据变化

侦听器

什么是vue中的侦听器

1. watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。例如，监视用户名的变化并发起请求，判断用户名是否可用。
2. 侦听器，也称为侦听属性。它可以监听指定的属性值的变化 ，只要属性值发生了变化 就会自动的触发相应的侦听器
3. 相比之下，它比计算属性更通用，特别是在有异步操作的场景下

侦听器的定义及使用

侦听器的定义

• 使用watch结构定义侦听器
• 定义为函数的形式,且函数名称必须和你想侦听的属性名称完全一致

watch:{
    // 定义侦听函数
    想侦听的属性名称(新值，旧值){
        // 业务处理
    }
}

侦听器的使用

• 不需要人为调用，也不能人为调用
• 只要侦听的数据发生变化，就会自动的触发
• 如果想获取到处理结果，一般是将结果赋值给其它的成员

侦听器的其它选项：

这个时候需要注意侦听器需要定义为对象的形式，以便让我们能够添加选项配置

• immediate :
  immediate:为true默认调用一次
• deep:
  deep: true :可以监听指定对象的属性值的变化，任何属性值发生了变化都会触发侦听器

侦听器的特点(与计算属性的异同)

• 它的命名不能随意，必须和你想侦听的属性名称完全一致
• 它不能手动调用，它是自动触发
• 侦听器侧重于监听单个数据的变化，最终执行特定的业务处理，不需要有任何返回值，如果有需要一般是将结果赋值给另外一个变量
• 它可以侦听异步操作中数据的变化