Vue计算属性

computed计算属性

概念

基于现有的数据，计算出来的新属性。 依赖的数据变化，自动重新计算。

语法

1. 声明在 computed 配置项中，一个计算属性对应一个函数
2. 使用起来和普通属性一样使用 {{ 计算属性名}}

    <div class="app">
        {{ sum }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'.app',
            data:{
                list:[1,2,3,4,5]
            },
            computed:{
                sum(){
                    let sum = this.list.reduce((s,i) => s+i,0)
                    return sum
                }
            }
        })
    </script>

注意

• computed配置项和data配置项是同级的
• computed中的计算属性虽然是函数的写法，但他依然是个属性
• computed中的计算属性不能和data中的属性同名
• 使用computed中的计算属性和使用data中的属性是一样的用法
• computed中计算属性内部的this依然指向的是Vue实例

computed计算属性 VS methods方法

computed计算属性

作用：封装了一段对于数据的处理，求得一个结果
语法：

1. 写在computed配置项中
2. 作为属性，直接使用
   • js中使用计算属性： this.计算属性
   • 模板中使用计算属性：{{计算属性}}

methods计算属性

作用：给Vue实例提供一个方法，调用以处理业务逻辑。
语法：

1. 写在methods配置项中
2. 作为方法调用
   • js中调用：this.方法名()
   • 模板中调用 {{方法名()}} 或者 @事件名=“方法名”

3.计算属性的优势

1. 缓存特性（提升性能）
   计算属性会对计算出来的结果缓存，再次使用直接读取缓存，
   依赖项变化了，会自动重新计算 → 并再次缓存
2. methods没有缓存特性

计算属性的完整写法