Vue 3进阶指南：计算属性和监听器深入剖析

2024-01-17 06:34:39

大家好，欢迎来到Vue 3进阶指南系列的第六篇。在这篇文章中，我们将深入探索计算属性和监听器这两个Vue 3的核心特性。它们是理解Vue响应式系统和构建复杂应用的关键。

一、计算属性

计算属性是一种特殊的属性，它可以从其他属性派生出新的值。计算属性本质上是一个函数，它会在任何依赖的数据发生变化时自动重新计算。

1. 基本用法

import { ref, computed } from 'vue'

const message = ref('Hello, world!')

// 计算属性
const uppercaseMessage = computed(() => {
  return message.value.toUpperCase()
})

// 使用计算属性
console.log(uppercaseMessage.value) // 输出：HELLO, WORLD!

在上面的例子中，uppercaseMessage是一个计算属性，它依赖于message属性。当message属性发生变化时，uppercaseMessage将自动重新计算并更新其值。

2. 高级用法

计算属性还可以用于更复杂的操作，例如：

从数组中获取特定元素
对数据进行格式化或转换
根据条件显示或隐藏元素
创建派生的状态

二、监听器

监听器是一种在特定事件发生时执行回调函数的机制。在Vue 3中，监听器可以通过@符号来定义。

1. 基本用法

<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const handleClick = () => {
      count.value++
    }

    return {
      count,
      handleClick
    }
  }
}
</script>