詳解Vue computed計(jì)算屬性是什么
1. Vue3中的computed函數(shù)
1.1. 什么是computed
computed
屬性是Vue3中的一個(gè)響應(yīng)式計(jì)算屬性,它可以根據(jù)其他響應(yīng)式數(shù)據(jù)的變化而自動(dòng)更新其自身的值。computed
屬性可以接收一個(gè)計(jì)算函數(shù),并在計(jì)算函數(shù)中使用其他響應(yīng)式數(shù)據(jù)的值進(jìn)行計(jì)算。當(dāng)任何一個(gè)參與計(jì)算的響應(yīng)式數(shù)據(jù)發(fā)生變化時(shí),computed
屬性會(huì)自動(dòng)重新計(jì)算其值,并觸發(fā)相應(yīng)的依賴更新。
1.2. 如何定義computed
在Vue3中,你可以通過(guò)computed
函數(shù)來(lái)定義一個(gè)計(jì)算屬性。computed
函數(shù)接收一個(gè)計(jì)算函數(shù)作為參數(shù),并返回一個(gè)響應(yīng)式的ref
對(duì)象。
下面是一個(gè)使用computed
函數(shù)形式用法的例子:
import { computed, reactive, ref } from 'vue' const state = reactive({ count: 0 }) const doubleCount = computed(() => { return state.count * 2 }) console.log(doubleCount.value) // 輸出:0 state.count = 1 console.log(doubleCount.value) // 輸出:2
在上面的例子中,我們使用computed
函數(shù)定義了一個(gè)計(jì)算屬性doubleCount
,它的值是state.count
的兩倍。我們可以通過(guò)doubleCount.value
來(lái)訪問計(jì)算屬性的值,并且當(dāng)state.count
的值發(fā)生變化時(shí),doubleCount
的值也會(huì)自動(dòng)更新。
下面是一個(gè)使用computed
對(duì)象形式用法的例子:
import { computed, reactive } from 'vue' const state = reactive({ count: 0 }) const doubleCount = computed({ get() { return state.count * 2 }, set(value) { state.count = value / 2 } }) console.log(doubleCount.value) // 輸出:0 doubleCount.value = 6 console.log(state.count) // 輸出:3 console.log(doubleCount.value) // 輸出:6
1.3. computed函數(shù)的使用場(chǎng)景
computed
屬性通常用于處理需要根據(jù)其他響應(yīng)式數(shù)據(jù)計(jì)算得出的值的情況。下面是一些computed
屬性的使用場(chǎng)景:
1.3.1. 過(guò)濾和排序
當(dāng)我們需要根據(jù)其他響應(yīng)式數(shù)據(jù)進(jìn)行數(shù)據(jù)過(guò)濾和排序時(shí),可以使用computed
屬性來(lái)計(jì)算得出過(guò)濾和排序后的結(jié)果。例如:
import { computed, reactive } from 'vue' const state = reactive({ todos: [ { id: 1, text: '學(xué)習(xí)Vue3', done: false }, { id: 2, text: '學(xué)習(xí)React', done: false }, { id: 3, text: '學(xué)習(xí)Angular', done: true } ], filter: 'all' }) const filteredTodos = computed(() => { if (state.filter === 'all') { return state.todos } else if (state.filter === 'active') { return state.todos.filter(todo => !todo.done) } else if (state.filter === 'completed') { return state.todos.filter(todo => todo.done) } }) console.log(filteredTodos.value) // 輸出:[{ id: 1, text: '學(xué)習(xí)Vue3', done: false }, { id: 2, text: '學(xué)習(xí)React', done: false }, { id: 3, text: '學(xué)習(xí)Angular', done: true }] state.filter = 'active' console.log(filteredTodos.value) // 輸出:[{ id: 1, text: '學(xué)習(xí)Vue3', done: false }, { id: 2, text: '學(xué)習(xí)React', done: false }]
在上面的例子中,我們使用computed
函數(shù)定義了一個(gè)計(jì)算屬性filteredTodos
,它根據(jù)state.todos
和state.filter
的值進(jìn)行過(guò)濾,并返回過(guò)濾后的結(jié)果。當(dāng)state.filter
的值發(fā)生變化時(shí),filteredTodos
的值也會(huì)自動(dòng)更新。
1.3.2. 數(shù)組計(jì)算
當(dāng)我們需要對(duì)一個(gè)數(shù)組進(jìn)行計(jì)算時(shí),可以使用computed
屬性來(lái)計(jì)算得出數(shù)組的值。例如:
import { computed, reactive } from 'vue' const state = reactive({ todos: [ { id: 1, text: '學(xué)習(xí)Vue3', done: false }, { id: 2, text: '學(xué)習(xí)React', done: false }, { id: 3, text: '學(xué)習(xí)Angular', done: true } ] }) const totalTodos = computed(() => { return state.todos.length }) const completedTodos = computed(() => { return state.todos.filter(todo => todo.done).length }) console.log(totalTodos.value) // 輸出:3 console.log(completedTodos.value) // 輸出:1
在上面的例子中,我們使用computed
函數(shù)定義了兩個(gè)計(jì)算屬性totalTodos
和completedTodos
,它們分別計(jì)算了state.todos
數(shù)組的總長(zhǎng)度和已完成的數(shù)量。當(dāng)state.todos
數(shù)組的值發(fā)生變化時(shí),totalTodos
和completedTodos
的值也會(huì)自動(dòng)更新。
2. computed函數(shù)的原理
在Vue3中,computed
屬性的原理是使用了一個(gè)getter
函數(shù)和一個(gè)setter
函數(shù)來(lái)實(shí)現(xiàn)。當(dāng)我們?cè)L問計(jì)算屬性的值時(shí),會(huì)調(diào)用getter
函數(shù)進(jìn)行計(jì)算,并將計(jì)算結(jié)果緩存起來(lái)。當(dāng)參與計(jì)算的響應(yīng)式數(shù)據(jù)發(fā)生變化時(shí),會(huì)觸發(fā)依賴更新,并自動(dòng)調(diào)用getter
函數(shù)重新計(jì)算計(jì)算屬性的值。當(dāng)我們修改計(jì)算屬性的值時(shí),會(huì)調(diào)用setter
函數(shù)進(jìn)行更新。
總結(jié)
computed
屬性是Vue3中的一個(gè)響應(yīng)式計(jì)算屬性,它可以根據(jù)其他響應(yīng)式數(shù)據(jù)的變化而自動(dòng)更新其自身的值。computed
屬性通常用于處理需要根據(jù)其他響應(yīng)式數(shù)據(jù)計(jì)算得出的值的情況,例如過(guò)濾和排序、數(shù)組計(jì)算等。computed
屬性的原理是使用了一個(gè)getter
函數(shù)和一個(gè)setter
函數(shù)來(lái)實(shí)現(xiàn),并將計(jì)算結(jié)果緩存起來(lái),以提高性能和減少計(jì)算次數(shù)。
到此這篇關(guān)于詳解Vue computed計(jì)算屬性是什么的文章就介紹到這了,更多相關(guān)Vue computed內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3全局屬性app.config.globalProperties的實(shí)現(xiàn)
Vue3中的app.config.globalProperties是一個(gè)強(qiáng)大的全局配置功能,允許我們?cè)趹?yīng)用級(jí)別設(shè)置和訪問屬性,本文主要介紹了Vue3全局屬性app.config.globalProperties的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01Vue 使用v-model實(shí)現(xiàn)控制子組件顯隱效果
v-model 可以實(shí)現(xiàn)雙向綁定的效果,允許父組件控制子組件的顯示/隱藏,同時(shí)允許子組件自己控制自身的顯示/隱藏,本文給大介紹Vue 使用v-model實(shí)現(xiàn)控制子組件顯隱,感興趣的朋友一起看看吧2023-11-11解決vite項(xiàng)目Uncaught Syntaxerror:Unexpected token>vue項(xiàng)
這篇文章主要介紹了解決vite項(xiàng)目Uncaught Syntaxerror:Unexpected token>vue項(xiàng)目上線白屏問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03uniapp開發(fā)打包多端應(yīng)用完整方法指南
這篇文章主要介紹了uniapp開發(fā)打包多端應(yīng)用完整流程指南,包括了uniapp打包小程序,uniapp打包安卓apk,uniapp打包IOS應(yīng)用,需要的朋友可以參考下2022-12-12vue通過(guò)v-html指令渲染的富文本無(wú)法修改樣式的解決方案
這篇文章主要介紹了vue通過(guò)v-html指令渲染的富文本無(wú)法修改樣式的解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05