vue中的计算属性

vue中的计算属性

概念:

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

一.计算属性的定义及使用

1.计算属性的定义

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

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

2.计算属性的使用

1. 看起来像函数，但是使用起来像使用属性一样,
2. 你可以像使用data中定义的属性一样来使用计算属性
3. 需要人为调用

示例

// 使用计算属性
<td>{{ reverseMsg }}</td>
----------------------------------------------------------------------
computed:{
    // 这个成员可实现业务处理，所以它是一个函数形式
    reverseMsg(){
        let v = this.msg.split('').reverse().join('')
        // 返回处理结果
        return v
    }
}

二.使用计算属性 注意事项

1. 计算属性必须定义在 computed结构中
2. 计算属性是一个function
3. 计算属性必须有返回值return
4. 计算属性不能被当作方法调用，它应该当成属性来调用
5. 计算属性需要人为调用，否则不会自动有效果

三.计算属性的特点

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

四.计算属性的应用场景

1. 当组件的 <template> 模板中包含太多的计算逻辑时，可以采用“计算属性”进行优化
2. 当某个数据的值依赖于多个数据项的变化时，可以将这个数据定义为“计算属性”

五.计算属性 VS 方法 区别

1. 计算属性是基于它们的响应式依赖进行缓存的，只有依赖数据发生了变化 ，计算属性才会重新的执行，否则会使用上次的执行结果，因为上次的结果已经存储到缓存，这也是它与函数的最本质的区别，意味着在多次调用的情况下，计算属性的性能更好
2. 如果不想使用缓存，那么使用函数也是一样的结果