Vue3基础API整理（二）

1. setup中的参数

在Vue3中，setup函数是组件初始化时执行的第一个函数。它可以接收三个参数：props、context和slots。

• props: props是组件的属性，由父组件传递而来。props是一个只读的对象，不能直接修改。
• context: context是组件的上下文对象，其中包含了一些有用的属性和方法。
• slots: slots是组件的插槽，由父组件传递而来。slots是一个对象，其中包含了父组件传递的插槽内容。

setup函数中的参数非常重要，它们可以帮助我们访问组件的数据和状态。

2. computed函数的使用

computed函数是一个计算属性函数，它可以根据组件的数据和状态计算出一个新的值。computed函数的返回值是响应式的，这意味着当组件的数据或状态发生变化时，computed函数的返回值也会自动更新。

computed函数的语法如下：

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

在上面的例子中，fullName是一个computed函数，它根据组件的firstName和lastName属性计算出组件的fullName。当firstName或lastName属性发生变化时，fullName的值也会自动更新。

computed函数非常有用，它可以帮助我们定义一些复杂的计算属性，并使这些属性保持响应式。

3. watch函数的使用

watch函数是一个侦听函数，它可以侦听组件的数据或状态的变化。当组件的数据或状态发生变化时，watch函数就会被触发。

watch函数的语法如下：

watch: {
  firstName(newValue, oldValue) {
    // 当firstName属性发生变化时触发
  },
  lastName: {
    handler(newValue, oldValue) {
      // 当lastName属性发生变化时触发
    },
    immediate: true
  }
}

在上面的例子中，firstName和lastName都是watch函数，它们分别侦听firstName和lastName属性的变化。当firstName或lastName属性发生变化时，对应的watch函数就会被触发。

watch函数非常有用，它可以帮助我们对组件的数据或状态的变化做出响应。

4. watchEffect函数的使用

watchEffect函数是一个副作用函数，它可以在组件初始化时或组件的数据或状态发生变化时执行。watchEffect函数与watch函数非常相似，但watchEffect函数不会接收任何参数，并且watchEffect函数的返回值不会被用于更新组件的状态。

watchEffect函数的语法如下：

watchEffect(() => {
  // 当组件初始化时或组件的数据或状态发生变化时触发
})

在上面的例子中，watchEffect函数会在组件初始化时或组件的数据或状态发生变化时触发。watchEffect函数中的代码可以执行一些副作用操作，例如：更新DOM、发送网络请求等。

watchEffect函数非常有用，它可以帮助我们执行一些副作用操作，而无需担心组件的状态更新。

5. 总结

在本文中，我们介绍了Vue3中的四个基础API：setup函数、computed函数、watch函数和watchEffect函数。我们详细介绍了每个API的语法、功能和使用场景，并提供了丰富的代码示例。通过本文，您应该对Vue3的基础API有更深入的了解，并能够在实际项目中熟练地使用它们。