当前位置：首页 > news >正文

Vue3学习（组合式API——计算属性computed详解）

news 来源：原创 2025/5/15 6:55:06

目录

一、计算属性computed。

Vue官方提供的案例。(普通写法与计算属性写法)

使用计算属性computed重构——>简化描述响应式状态的复杂逻辑。

（1）计算属性computed小案例。

<1>需求说明。（筛选原数组——>得新数组）

<2>计算属性基本语法。

<3>代码示例。

<4>响应式依赖更新，才会重新更新计算属性。

（2）计算属性可支持getter、settter创建。(默认只读)

<1>只读计算属性。

<2>提供 getter 和 setter 创建可写计算属性。

（3）"计算属性缓存" vs "方法(函数)"。

（4）计算属性computed的最佳实践。

一、计算属性computed。

官方解释：使用计算属性来描述依赖响应式状态的复杂逻辑。

Vue官方提供的案例。(普通写法与计算属性写法)

向上面必须认真看好一会儿才能明白它的计算依赖于author.books。更重要的是，如果在模板中需要不止一次这样的计算，就需要将这样的代码在模板里重复好多遍。

使用计算属性computed重构——>简化描述响应式状态的复杂逻辑。

（1）计算属性computed小案例。

<1>需求说明。（筛选原数组——>得新数组）

<2>计算属性基本语法。

const 计算属性 = computed(()=>{..return计算返回的结果..})。

<3>代码示例。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><div>原始数据：{{list}}</div><div>=================================</div><div>计算属性数据：{{computedList}}</div></div><script type="module">import { createApp, ref, computed } from './vue.esm-browser.js'createApp({setup() {const list = ref([1, 2, 3, 4, 5, 6, 7, 8])//基于list派生一个计算属性，从list中过滤出>2const computedList = computed(() => {return list.value.filter(item => item > 2)})return {list,computedList}}}).mount('#app')</script></body></html>

效果如下。

<4>响应式依赖更新，才会重新更新计算属性。

当响应式依赖原始数组对象list更新，计算属性会跟着动态更新。
代码示例。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><div>原始数据：{{list}}</div><button @click="changeList">更新list</button><div>=================================</div><div>计算属性数据：{{computedList}}</div></div><script type="module">import { createApp, ref, computed } from './vue.esm-browser.js'createApp({setup() {const list = ref([1, 2, 3, 4, 5, 6, 7, 8])//基于list派生一个计算属性，从list中过滤出>2const computedList = computed(() => {return list.value.filter(item => item > 2)})//修改数组list的方法const changeList = () => {//点击一次按钮，添加一个666list.value.push(666)}return {list,computedList,changeList}}}).mount('#app')</script></body></html>

效果如下。

（2）计算属性可支持getter、settter创建。(默认只读)

官方解释。

<1>只读计算属性。

代码示例。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><div>原始数据：{{count}}</div><div>=================================</div><div>计算属性数据：{{countComputed}}</div></div><script type="module">import { createApp, ref, computed } from './vue.esm-browser.js'createApp({setup() {const count = ref(1)const countComputed = computed(() => {return count.value + 1})return {count,countComputed}}}).mount('#app')</script></body></html>

效果如下。

尝试直接修改计算属性。（出现错误不生效）

<2>提供 getter 和 setter 创建可写计算属性。

代码示例。（根据官方文档的语法格式书写）
具体的过程计算可以看注释！

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><div>原始数据：{{count}}</div> <!-- count的计算过程：1-2=-1 --><div>=================================</div><div>计算属性数据：{{countComputed}}</div> <!-- countComputed的计算过程：1-2+1=0 --></div><script type="module">import { createApp, ref, computed } from './vue.esm-browser.js'createApp({setup() {const count = ref(1)const countComputed = computed({get() { return count.value + 1 },set(newValue) { return count.value = newValue - 2 }})countComputed.value = 1console.log('set调用：' + count.value)return {count,countComputed}}}).mount('#app')</script></body></html>

效果如下。

（3）"计算属性缓存" vs "方法(函数)"。

官方解释：计算属性值会基于其响应式依赖被缓存。
为什么需要缓存呢？想象一下我们有一个非常耗性能的计算属性 list，需要循环一个巨大的数组并做许多计算逻辑，并且可能也有其他计算属性依赖于 list。没有缓存的话，我们会重复执行非常多次 list 的 getter，然而这实际上没有必要！如果你确定不需要缓存，那么也可以使用方法(函数)调用。

代码示例。(函数aaa与计算属性bbb的调用对比)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><div>调用1次方法(函数)aaa{{aaa()}}<br>调用2次方法(函数)aaa{{aaa()}}<br>调用3次方法(函数)aaa{{aaa()}}<div>=========================</div>调用1次计算属性{{bbb}}<br>调用2次计算属性{{bbb}}<br>调用3次计算属性{{bbb}}</div></div><script type="module">import { createApp, computed } from '/vue.esm-browser.js'createApp({setup() {const aaa = () => {console.log('aaaa函数')}const bbb = computed(() => {console.log('bbb计算属性')})return {aaa,bbb}}}).mount('#app')</script>
</body></html>
效果如下。