Vue — 计算属性(computed)详解

Vue.js 中的计算属性是基于它的响应式系统来实现的，它可以根据 Vue 实例的数据状态来动态计算出新的属性值。在 Vue 组件中，计算属性常用于对数据进行处理和转换，以及动态生成一些需要的数据。

一、使用方式

1.定义计算属性： 在Vue组件中，通过在 computed 对象中定义计算属性名称及对应的计算函数来创建计算属性。计算函数会返回计算属性的值。

2.在模板中使用计算属性： 在Vue的模板中，您可以直接像访问普通属性一样使用计算属性。Vue会自动处理计算属性的依赖关系，并在相关数据变化时更新计算属性。

<div id="app">
        <ul>

            <li v-for="(item,index) in list" :key="item.id">
                {{item.name}}有{{item.num}}个
            </li>
        </ul>
        总数 ： {{conputedSum}}个
    </div>
    computed:{
            conputedSum(){
                let sum = this.list.reduce((sum,item)=>{
                    
                   return sum +item.num
                },0)

                return sum
            }
        }

3.计算属性的特点：

（1）计算属性是基于它们的依赖进行缓存的，只有在依赖发生变化时才会重新求值。

（2）计算属性的值会根据相关依赖的变化而自动更新，无需手动触发。

（3）计算属性的定义类似于普通的属性，但需要使用函数来返回计算结果。

二、computed与methods的区别

1.计算属性和方法的调用方式不同： 计算属性是通过对应名称直接访问的，而方法需要在模板中使用 v-on 指令或者 @ 符号进行调用。

2.计算属性可以缓存结果，而方法不能： 计算属性的值会被缓存起来，只有在它所依赖的响应式数据变化时才会重新计算。而方法每次调用都要重新计算，无法被缓存。

3.计算属性应该用于简单的计算，而方法用于复杂逻辑的处理： 如果需要对数据进行一些简单的计算或过滤，可以使用计算属性，因为它们比方法更高效。而如果需要进行一些复杂的逻辑处理，应该使用方法。

三、计算属性的完整写法

<div class="div">
            姓：<input type="text" v-model="surName">
                +
            名：<input type="text" v-model="nickName">
            =
            {{fullName}}
            <div>

                <button @click="changeName"> 改名卡</button>
            </div>
        </div>
//默认写法：只能读取 不能修改
            // fullName(){
            //         return this.surName+ this.nickName
            // }
            //完整写法 
            fullName:{
                //获取数据时，执行get
                get () {
                    return this.surName+ this.nickName
                } ,
                //修改数据时 执行set 修改的值 传给set的形参
                set(value){
                    console.log(value)
                    this.surName= value.slice(0,1)
                    this.nickName= value.slice(1)

                }
            }