詳解Vue computed計算屬性是什么

更新時間：2023年03月09日 09:14:56 作者：劍九六千里

在vue中，有時候你需要對data中的數(shù)據(jù)進行處理，或者對抓取的數(shù)據(jù)進行處理之后再掛載呈現(xiàn)到標簽中，這時候你就需要計算屬性了，當然看到這里你可能還是不了解那下面我舉幾個實例并附代碼解釋

1. Vue3中的computed函數(shù)

1.1. 什么是computed

computed屬性是Vue3中的一個響應式計算屬性，它可以根據(jù)其他響應式數(shù)據(jù)的變化而自動更新其自身的值。computed屬性可以接收一個計算函數(shù)，并在計算函數(shù)中使用其他響應式數(shù)據(jù)的值進行計算。當任何一個參與計算的響應式數(shù)據(jù)發(fā)生變化時，computed屬性會自動重新計算其值，并觸發(fā)相應的依賴更新。

1.2. 如何定義computed

在Vue3中，你可以通過computed函數(shù)來定義一個計算屬性。computed函數(shù)接收一個計算函數(shù)作為參數(shù)，并返回一個響應式的ref對象。

下面是一個使用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ù)定義了一個計算屬性doubleCount，它的值是state.count的兩倍。我們可以通過doubleCount.value來訪問計算屬性的值，并且當state.count的值發(fā)生變化時，doubleCount的值也會自動更新。

下面是一個使用computed對象形式用法的例子：

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ù)的使用場景

computed屬性通常用于處理需要根據(jù)其他響應式數(shù)據(jù)計算得出的值的情況。下面是一些computed屬性的使用場景：

1.3.1. 過濾和排序

當我們需要根據(jù)其他響應式數(shù)據(jù)進行數(shù)據(jù)過濾和排序時，可以使用computed屬性來計算得出過濾和排序后的結(jié)果。例如：

import { computed, reactive } from 'vue'
const state = reactive({
  todos: [
    { id: 1, text: '學習Vue3', done: false },
    { id: 2, text: '學習React', done: false },
    { id: 3, text: '學習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: '學習Vue3', done: false }, { id: 2, text: '學習React', done: false }, { id: 3, text: '學習Angular', done: true }]
state.filter = 'active'
console.log(filteredTodos.value) // 輸出：[{ id: 1, text: '學習Vue3', done: false }, { id: 2, text: '學習React', done: false }]

在上面的例子中，我們使用computed函數(shù)定義了一個計算屬性filteredTodos，它根據(jù)state.todos和state.filter的值進行過濾，并返回過濾后的結(jié)果。當state.filter的值發(fā)生變化時，filteredTodos的值也會自動更新。

1.3.2. 數(shù)組計算

當我們需要對一個數(shù)組進行計算時，可以使用computed屬性來計算得出數(shù)組的值。例如：

import { computed, reactive } from 'vue'
const state = reactive({
  todos: [
    { id: 1, text: '學習Vue3', done: false },
    { id: 2, text: '學習React', done: false },
    { id: 3, text: '學習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ù)定義了兩個計算屬性totalTodos和completedTodos，它們分別計算了state.todos數(shù)組的總長度和已完成的數(shù)量。當state.todos數(shù)組的值發(fā)生變化時，totalTodos和completedTodos的值也會自動更新。

2. computed函數(shù)的原理

在Vue3中，computed屬性的原理是使用了一個getter函數(shù)和一個setter函數(shù)來實現(xiàn)。當我們訪問計算屬性的值時，會調(diào)用getter函數(shù)進行計算，并將計算結(jié)果緩存起來。當參與計算的響應式數(shù)據(jù)發(fā)生變化時，會觸發(fā)依賴更新，并自動調(diào)用getter函數(shù)重新計算計算屬性的值。當我們修改計算屬性的值時，會調(diào)用setter函數(shù)進行更新。

總結(jié)

computed屬性是Vue3中的一個響應式計算屬性，它可以根據(jù)其他響應式數(shù)據(jù)的變化而自動更新其自身的值。computed屬性通常用于處理需要根據(jù)其他響應式數(shù)據(jù)計算得出的值的情況，例如過濾和排序、數(shù)組計算等。computed屬性的原理是使用了一個getter函數(shù)和一個setter函數(shù)來實現(xiàn)，并將計算結(jié)果緩存起來，以提高性能和減少計算次數(shù)。

到此這篇關于詳解Vue computed計算屬性是什么的文章就介紹到這了,更多相關Vue computed內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: