Vue3入门-03计算属性

Vue-03计算属性

模板中表达式虽然方便，但是只能用来做简单的操作；如果在模板中写太多的逻辑，会让模板变得臃肿，难以维护；因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑

• 选项式API中，可以提供computed选项来声明计算属性
• 组合式API中，可以通过computed回调函数返回的值来计算属性

<script setup>
	let age = ref('18');
    
    let ageState = computed(()=>{
        if(age.value < 18){
            return '未成年'
        }else if(age.value < 30){
            return '成年'
        }else if(age.value < 60){
            return '中年'
        }else{
            return '老年'
        }
    })
</script>

<template>
	年龄:<input type='number'>
    <hr>
	分类: {{ageState}}
</template>

计算属性与方法的区别：

• 两种方式在结果上是完全相同的，不同之处在于计算属性值会基于响应式依赖被缓存。

• 一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要所依赖的数据源不改变，无论多少次访问计算属性都会立即返回先前的计算结果，而不用重复执行getter函数

  • 这种说法是指在选项式API中就相当于申请一个变量作为computed的getter方法

  • computed: {
        // 一个计算属性的 getter
        publishedBooksMessage() {
          // `this` 指向当前组件实例
          return this.author.books.length > 0 ? 'Yes' : 'No'
        }
      }
    

• 方法调用总会在重新渲染时再次执行

计算属性注意事项：

• 不要再计算属性中做异步请求或更改
• 避免直接修改计算属性值

可写计算属性

计算属性默认是只读的。当你尝试修改一个计算属性时，会被警告，如果相对计算属性进行修改这需要编写计算属性的getter和 setter

<script setup>
import {ref,computed} from 'vue'
    
const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
    // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
</script>

选项式API计算属性实现

export default {
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  },
  computed: {
    // 一个计算属性的 getter
    publishedBooksMessage() {
      // `this` 指向当前组件实例
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }
}