Vue中的computed函數怎么使用

這篇“Vue中的computed函數怎么使用”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue中的computed函數怎么使用”文章吧。

1. Vue3中的computed函數

1.1. 什么是computed

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

1.2. 如何定義computed

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

下面是一個使用computed函數形式用法的例子：

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函數定義了一個計算屬性doubleCount，它的值是state.count的兩倍。我們可以通過doubleCount.value來訪問計算屬性的值，并且當state.count的值發生變化時，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函數的使用場景

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

1.3.1. 過濾和排序

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

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函數定義了一個計算屬性filteredTodos，它根據state.todos和state.filter的值進行過濾，并返回過濾后的結果。當state.filter的值發生變化時，filteredTodos的值也會自動更新。

1.3.2. 數組計算

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

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函數定義了兩個計算屬性totalTodos和completedTodos，它們分別計算了state.todos數組的總長度和已完成的數量。當state.todos數組的值發生變化時，totalTodos和completedTodos的值也會自動更新。

2. computed函數的原理

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

以上就是關于“Vue中的computed函數怎么使用”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。