Vue3 生命周期、computed、watch 和 watchEffect

## 前言

大家好，我是三无。今天，我们一起来学习 Vue3 中的生命周期、computed、watch 和 watchEffect。

## 生命周期

Vue3 的生命周期与 Vue2 大体相同，但细节上有一些差异。

### created

created 钩子在组件实例创建后立即调用。它通常用于执行一些初始化操作，例如：

* 从服务器端获取数据
* 设置组件状态
* 订阅事件

### mounted

mounted 钩子在组件实例挂载到 DOM 后调用。它通常用于执行一些与 DOM 相关的操作，例如：

* 绑定事件侦听器
* 调整样式
* 获取 DOM 元素的引用

### destroyed

destroyed 钩子在组件实例销毁前调用。它通常用于执行一些清理操作，例如：

* 解绑事件侦听器
* 取消订阅事件
* 释放内存

## computed

computed 属性是 Vue3 中的一种特殊属性。它允许我们基于其他属性计算出一个新的属性。computed 属性是惰性的，这意味着它只会在被访问时计算一次。

### 语法

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

应用场景

computed 属性通常用于计算一些复杂的属性，例如：

• 用户的完整姓名
• 购物车的总金额
• 产品的平均评分

watch

watch 钩子允许我们监听某个属性的变化。当属性发生变化时，watch 钩子就会触发。

语法

watch: {
  firstName(newValue, oldValue) {
    // newValue 是新值，oldValue 是旧值
  }
}

应用场景

watch 钩子通常用于以下场景：

• 响应用户的输入
• 跟踪组件状态的变化
• 与服务器端通信

watchEffect

watchEffect 是 Vue3 中的新特性。它允许我们监听多个属性的变化。当任何一个属性发生变化时，watchEffect 就会触发。

语法

watchEffect(() => {
  // 这里可以访问组件实例的所有属性
})

应用场景

watchEffect 通常用于以下场景：

• 计算一些复杂的属性，例如：购物车的总金额
• 响应用户的输入
• 跟踪组件状态的变化
• 与服务器端通信

总结

本文介绍了 Vue3 的生命周期、computed、watch 和 watchEffect。希望对大家有所帮助。