vue中计算属性的介绍

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:{//获取数据时，执行getget () {return this.surName+ this.nickName} ,//修改数据时 执行set 修改的值 传给set的形参set(value){console.log(value)this.surName= value.slice(0,1)this.nickName= value.slice(1)}}