Vue3 中 Composition API 的简单使用：第二部分

2024-01-14 17:17:24

在上一篇文章中，我们介绍了 Vue3 中 Composition API 的基础知识，包括如何使用 setup 函数和 ref 函数来创建响应式数据。在本文中，我们将继续介绍 Composition API 的其他特性，包括 computed 函数和 watch 监听。

1. computed 函数

computed 函数用于计算响应式值。computed 函数接收一个函数作为参数，该函数返回一个值。这个值会自动追踪依赖项，当依赖项发生变化时，computed 函数会重新执行，并返回新的值。

例如，以下代码演示了如何使用 computed 函数计算组件的总价：

import { ref, computed } from 'vue'

export default {
  setup() {
    const quantity = ref(1)
    const price = ref(10)

    const total = computed(() => {
      return quantity.value * price.value
    })

    return {
      quantity,
      price,
      total
    }
  }
}

在上面的代码中，total 是一个 computed 属性。total 属性的值是 quantity 和 price 的乘积。当 quantity 或 price 发生变化时，total 会自动更新。

2. computed 完整

computed 函数还支持以下几个特性：

setter 函数： computed 函数可以定义一个 setter 函数，当 computed 属性的值发生变化时，setter 函数会被调用。例如，以下代码演示了如何使用 setter 函数来限制 total 属性的最大值：

import { ref, computed } from 'vue'

export default {
  setup() {
    const quantity = ref(1)
    const price = ref(10)

    const total = computed({
      get() {
        return quantity.value * price.value
      },
      set(newValue) {
        if (newValue > 100) {
          throw new Error('Total cannot be greater than 100')
        }

        quantity.value = Math.floor(newValue / price.value)
      }
    })

    return {
      quantity,
      price,
      total
    }
  }
}

懒加载： computed 函数可以定义一个懒加载函数。懒加载函数只会在 computed 属性首次被访问时执行。例如，以下代码演示了如何使用懒加载函数来计算一个昂贵的计算：

import { ref, computed } from 'vue'

export default {
  setup() {
    const quantity = ref(1)
    const price = ref(10)

    const total = computed(() => {
      // 昂贵的计算
      return quantity.value * price.value
    }, {
      lazy: true
    })

    return {
      quantity,
      price,
      total
    }
  }
}

依赖项跟踪： computed 函数可以跟踪其依赖项。当依赖项发生变化时，computed 函数会自动重新执行。例如，以下代码演示了如何使用依赖项跟踪来避免不必要的重新计算：

import { ref, computed } from 'vue'

export default {
  setup() {
    const quantity = ref(1)
    const price = ref(10)

    const total = computed(() => {
      // 只会在 quantity 或 price 发生变化时执行
      return quantity.value * price.value
    }, [quantity, price])

    return {
      quantity,
      price,
      total
    }
  }
}

3. watch 监听

watch 监听用于监听响应式数据的变化。watch 监听接收两个参数，第一个参数是一个函数，该函数会在响应式数据发生变化时被调用。第二个参数是一个对象，可以指定监听的响应式数据和监听选项。

例如，以下代码演示了如何使用 watch 监听来在控制台输出 total 的变化：

import { ref, watch } from 'vue'

export default {
  setup() {
    const quantity = ref(1)
    const price = ref(10)

    const total = computed(() => {
      return quantity.value * price.value
    })

    watch(total, (newValue, oldValue) => {
      console.log(`Total changed from ${oldValue} to ${newValue}`)
    })

    return {
      quantity,
      price,
      total
    }
  }
}

在上面的代码中，watch 监听 total 的变化。当 total 发生变化时，watch 监听会调用一个函数，该函数会在控制台输出 total 的变化。

4. 完整代码示例

以下是一个完整的代码示例，演示了如何在 Vue3 中使用 Composition API 来构建一个简单的购物车组件：

import { ref, computed, watch } from 'vue'

export default {
  setup() {
    const products = ref([
      { name: 'Product 1', price: 10 },
      { name: 'Product 2', price: 20 },
      { name: 'Product 3', price: 30 }
    ])

    const cart = ref([])

    const total = computed(() => {
      return cart.value.reduce((acc, product) => {
        return acc + product.price
      }, 0)
    })

    const addToCart = (product) => {
      cart.value.push(product)
    }

    const removeFromCart = (product) => {
      const index = cart.value.findIndex((p) => p === product)
      cart.value.splice(index, 1)
    }

    watch(cart, () => {
      console.log(`Cart updated: ${cart.value}`)
    })

    return {
      products,
      cart,
      total,
      addToCart,
      removeFromCart
    }
  }
}