计算属性是Vue.js框架中的一种派生出新值的便捷方式，它允许你在Vue实例中定义一些派生出来的数据，这些数据会根据依赖的响应式数据自动计算并缓存结果。计算属性可以理解为一个函数，这个函数接收当前组件实例中的数据作为参数，并且返回一个新的计算结果。当数据发生变化时，计算属性也会重新计算并更新组件的渲染。
计算属性的优点
- 自动响应式更新：当计算属性依赖的响应式数据发生变化时，计算属性会自动重新计算并更新其值。这意味着你无需手动追踪依赖的数据变化，Vue会自动帮你处理。
- 缓存机制：计算属性会缓存计算结果，只有相关的响应式数据发生改变时才会重新计算。这样可以避免不必要的计算，提高性能。
- 声明简单：你只需要在Vue实例的
computed选项中定义计算属性名称和对应的计算函数即可。
计算属性的使用
<template>
<div>
<view class="text-area" @click='changeTitle'>
<text class="title">{{title}}</text>
<text>{{reverseTitle}}</text>
</view>
</div>
</template>
<script setup>
import { ref,computed } from 'vue'
const title = ref('你好')
const changeTitle = () => {
title.value = title.value === '你好' ? 'Hello' : '你好'
}
const reverseTitle = computed(() => {
return title.value.split('').reverse().join('')
})
</script>
- 引入vue中的
ref响应式数据类型和计算属性computed
import { ref,computed } from 'vue'
- 用ref定义了一个响应式类型的数据title,同时定义了一个变量reverseTitle它的值为一个计算属性的函数返回值。在这里title的初始值为'你好'，reverseTitle的返回值为title.value的倒序。
const title = ref('你好')
const reverseTitle = computed(() => { return title.value.split('').reverse().join('') })
- 由于给view标签绑定了一个点击事件changeTitle,这个点击事件的作用是当点击文本时，文本的内容会在“你好”和“hello”中来回切换，此时计算属性会监听响应数据title.value的变化因此reverseTitle的值也会变化。
- 初始效果为：
- 当我们点击文本改变响应数据的时候, 数据一发生变化,就会自动触发依赖这个数据的计算属性的方法, 通过计算的得到的结果将会覆盖原来的属性的结果, 也就会重现渲染页面结果
- 点击后的效果为：
总结
通过使用计算属性，可以减少很多重复的计算，同时还会帮助你追踪响应式数据的变化。通过使用计算属性，你可以将复杂的逻辑封装在一个可复用的函数中，并且在模板中方便地使用它们。
