《vue3计算属性的方法》

在Vue3项目开发中，我们经常会遇到需要基于原始数据进行一些逻辑处理再展示的情况，而计算属性就是解决这个问题的利器。它能够根据依赖的数据变化自动更新，并且可以将复杂的逻辑封装起来，使代码更加简洁易读。

一、基本使用方法

是最简单的定义方式。在Vue组件的setup函数中，可以使用computed函数来创建计算属性。

javascript
import { ref, computed } from 'vue'
export default {
  setup() {
    const message = ref('hello world')</p>

<pre><code>// 定义一个简单的计算属性
const reversedMessage = computed(() => {
  return message.value.split('').reverse().join('')
})

return {
  message,
  reversedMessage
}

}
}

这里定义了一个message响应式变量，然后通过computed创建了reversedMessage计算属性，它依赖于message，当message发生变化时，reversedMessage会自动重新计算。

二、带参数的计算属性（ getter 和 setter ）

有时候我们需要更灵活地操作计算属性，比如同时定义获取值和设置值的行为。

javascript
import { ref, computed } from 'vue'
export default {
  setup() {
    const firstName = ref('John')
    const lastName = ref('Doe')</p>

<pre><code>const fullName = computed({
  get: () => {
    return firstName.value + ' ' + lastName.value
  },
  set(newValue) {
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})

return {
  firstName,
  lastName,
  fullName
}

}
}

在这个例子中，fullName既可以通过get方法获取组合后的名字，又可以通过set方法根据新的完整名字来修改firstName和lastName。

三、利用缓存机制优化性能

计算属性具有缓存特性，只有在其依赖的数据发生变化时才会重新计算。这有助于提高性能，避免不必要的重复计算。

例如，有一个列表过滤功能：

javascript
import { ref, computed } from 'vue'
export default {
  setup() {
    const list = ref([1, 2, 3, 4, 5])
    const filterValue = ref(3)</p>

<pre><code>const filteredList = computed(() => {
  return list.value.filter(item => item > filterValue.value)
})

return {
  list,
  filterValue,
  filteredList
}

}
}

当list或者filterValue没有变化时，filteredList不会重新执行过滤操作，而是直接返回之前的结果，这就是计算属性缓存带来的好处。

Vue3中的计算属性提供了多种使用方式，可以根据实际需求灵活选择，让我们的代码更具可读性和高效性。