Vue3中的setup语法糖、computed函数、watch函数如何用

Vue3 作为 Vue.js 的最新版本，带来了许多新的特性和改进，其中最引人注目的就是 Composition API。Composition API 提供了一种更灵活、更强大的方式来组织和复用代码逻辑。在 Composition API 中，setup 函数是最核心的部分，而 computed 和 watch 则是两个非常重要的辅助函数。本文将详细介绍如何在 Vue3 中使用 setup 语法糖、computed 函数和 watch 函数。

1. setup 语法糖

1.1 setup 函数的基本概念

在 Vue3 中，setup 函数是 Composition API 的入口点。它是在组件创建之前执行的，用于初始化组件的状态、计算属性、方法等。setup 函数接收两个参数：

• props：组件的 props 对象。
• context：包含 attrs、slots、emit 等属性的上下文对象。

setup 函数返回一个对象，该对象的属性将被暴露给模板使用。

1.2 setup 语法糖的使用

在 Vue3.2 中，引入了 setup 语法糖，使得我们可以更简洁地编写 setup 函数。使用 setup 语法糖时，我们不再需要显式地定义 setup 函数，而是直接在 <script setup> 标签中编写代码。

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const message = ref('Hello, Vue3!')
const count = ref(0)

function increment() {
  count.value++
}
</script>

在上面的例子中，我们使用了 setup 语法糖，直接在 <script setup> 标签中定义了 message、count 和 increment 函数。这些变量和函数会自动暴露给模板使用。

1.3 setup 语法糖的优势

• 简洁性：使用 setup 语法糖可以减少代码量，使得代码更加简洁易读。
• 自动暴露：在 setup 语法糖中定义的变量和函数会自动暴露给模板，无需手动返回。
• 更好的类型推断：setup 语法糖与 TypeScript 结合使用时，能够提供更好的类型推断。

2. computed 函数

2.1 computed 函数的基本概念

computed 函数用于定义计算属性。计算属性是基于响应式数据进行计算的属性，只有当依赖的响应式数据发生变化时，计算属性才会重新计算。

2.2 computed 函数的使用

在 Vue3 中，我们可以使用 computed 函数来定义计算属性。computed 函数接收一个 getter 函数作为参数，并返回一个只读的 ref 对象。

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`
})
</script>

在上面的例子中，我们定义了一个 fullName 计算属性，它依赖于 firstName 和 lastName。当 firstName 或 lastName 发生变化时，fullName 会自动更新。

2.3 computed 函数的进阶用法

computed 函数还支持传入一个包含 get 和 set 函数的对象，用于定义可写的计算属性。

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
    <input v-model="fullName" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`
  },
  set(newValue) {
    const [first, last] = newValue.split(' ')
    firstName.value = first
    lastName.value = last
  }
})
</script>

在上面的例子中，我们定义了一个可写的 fullName 计算属性。当用户在输入框中修改 fullName 时，set 函数会被调用，从而更新 firstName 和 lastName。

3. watch 函数

3.1 watch 函数的基本概念

watch 函数用于监听响应式数据的变化，并在数据变化时执行相应的回调函数。watch 函数可以监听单个或多个响应式数据，并且可以配置深度监听、立即执行等选项。

3.2 watch 函数的使用

在 Vue3 中，我们可以使用 watch 函数来监听响应式数据的变化。watch 函数接收两个参数：

• 要监听的响应式数据。
• 回调函数，当数据变化时执行。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const count = ref(0)

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

function increment() {
  count.value++
}
</script>

在上面的例子中，我们使用 watch 函数监听 count 的变化。每当 count 发生变化时，回调函数会被调用，并打印出变化前后的值。

3.3 watch 函数的进阶用法

watch 函数还支持监听多个响应式数据，并且可以配置深度监听、立即执行等选项。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Message: {{ message }}</p>
    <button @click="increment">Increment</button>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const count = ref(0)
const message = ref('Hello, Vue3!')

watch([count, message], ([newCount, newMessage], [oldCount, oldMessage]) => {
  console.log(`Count changed from ${oldCount} to ${newCount}`)
  console.log(`Message changed from ${oldMessage} to ${newMessage}`)
}, {
  immediate: true, // 立即执行回调函数
  deep: true // 深度监听
})

function increment() {
  count.value++
}

function updateMessage() {
  message.value = 'Updated Message'
}
</script>

在上面的例子中，我们使用 watch 函数同时监听 count 和 message 的变化，并配置了 immediate 和 deep 选项。immediate 选项使得回调函数在监听开始时立即执行一次，deep 选项使得 watch 函数能够深度监听对象或数组的变化。

3.4 watchEffect 函数

除了 watch 函数，Vue3 还提供了 watchEffect 函数。watchEffect 函数会自动追踪其内部使用的响应式数据，并在这些数据变化时重新执行回调函数。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue'

const count = ref(0)

watchEffect(() => {
  console.log(`Count is now ${count.value}`)
})

function increment() {
  count.value++
}
</script>

在上面的例子中，我们使用 watchEffect 函数来监听 count 的变化。每当 count 发生变化时，watchEffect 的回调函数会自动重新执行。

4. 总结

Vue3 的 Composition API 提供了 setup 语法糖、computed 函数和 watch 函数等强大的工具，使得我们能够更灵活、更高效地组织和复用代码逻辑。setup 语法糖使得代码更加简洁易读，computed 函数用于定义计算属性，watch 函数用于监听响应式数据的变化。通过合理使用这些工具，我们可以编写出更加健壮、可维护的 Vue3 应用。

希望本文能够帮助你更好地理解和使用 Vue3 中的 setup 语法糖、computed 函数和 watch 函数。如果你有任何问题或建议，欢迎在评论区留言讨论。