computed计算属性

• 语法：
  1. 声明在 computed 配置项中，一个计算属性对应一个函数
  2. 使用起来和普通属性一样使用 {{计算属性名}}
     
     
• 注意
  1. computed配置项和data配置项是同级的
  2. computed中的计算属性虽然是函数的写法，但它依然是属性
  3. computed中的计算属性不能和data中的属性同名
  4. 使用computed中的计算属性和使用data中的属性是一样的用法
  5. computed中计算属性内部的this依然指向的是Vue实例

<div id="app"><table><tr><th>name</th><th>num</th></tr><tr v-for="(item,index) in list" :key="item.id"><td>{{item.name}}</td><td>{{item.num}}</td></tr></table><p>sum:{{totalCount}}</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {list: [{ id: 1, name: 'apple', num: 1 },{ id: 2, name: 'banana', num: 5 },{ id: 3, name: 'peach', num: 3 }]},computed: {totalCount() {let total = this.list.reduce((sum, item) => sum + item.num, 0)return total}}})</script>

computed计算属性 VS methods方法

• computed计算属性
  作用：封装了一段对于数据的处理，求得一个结果
  语法：
  1. 写在computed配置项中
  2. 作为属性，直接使用
  • js中使用计算属性： this.计算属性
  • 模板中使用计算属性：{{计算属性}}
    
    
• methods计算属性
  作用：给Vue实例提供一个方法，调用以处理业务逻辑。
  语法：
  1. 写在methods配置项中
  2. 作为方法调用
  • js中调用：this.方法名()
  • 模板中调用 {{方法名()}} 或者 @事件名=“方法名”
    
    
• 计算属性的优势
  1.缓存特性（提升性能）
  计算属性会对计算出来的结果缓存，再次使用直接读取缓存，
  依赖项变化了，会自动重新计算并再次缓存
  2. methods没有缓存特性
  
  
• 总结

  1. computed有缓存特性，methods没有缓存

  2. 当一个结果依赖其他多个值时，推荐使用计算属性

  3. 当处理业务逻辑时，推荐使用methods方法，比如事件的处理函数

计算属性的完整写法

1. 计算属性默认的简写，只能读取访问，不能 “修改”
2. 如果要 “修改”，需要写计算属性的完整写法

示例：

computed: {fullName: {get() {return this.firstName + this.lastName},set(value) {console.log(value);this.firstName = value.slice(0, 1)this.lastName = value.slice(1)}}}