Vue3中的computed属性

最新推荐文章于 2025-11-23 23:58:26 发布

原创最新推荐文章于 2025-11-23 23:58:26 发布 · 257 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

基本用法：

import {ref,computed} from 'vue'

const count = ref(0)

const doubleCount = computed(()=>{
return count.value*2})//创建计算属性

console.log(doubleCount.value)//0
count.value=1
const.log(doubleCount.value)//2

如果我们要修改计算属性

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  //获取计算结果
  get() {
    return `${firstName.value} ${lastName.value}`
  },
  //处理计算属性的赋值
  set(newValue) {
    const [newFirst, newLast] = newValue.split(' ')
    firstName.value = newFirst
    lastName.value = newLast
  }
})

console.log(fullName.value) // "John Doe"
fullName.value = "Alice Smith"
console.log(firstName.value) // "Alice"
console.log(lastName.value) // "Smith"

那么与普通的方法又有什么区别呢(method)

computed注意它是一个属性，适用于复杂逻辑、需要多次使用的结果（不需要重复计算）

// 计算属性（有缓存）
const filteredList = computed(() => {
  return list.value.filter(item => item.active)
})

// 方法（无缓存）
function getFilteredList() {
  return list.value.filter(item => item.active)
}

最后补充一点在组件中的使用

<template>
  <div>
    <p>原始值: {{ count }}</p>
    <p>计算值: {{ doubleCount }}</p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
const count = ref(10)
const doubleCount = computed(() => count.value * 2)
</script>