下面是“Vue3中的Hooks总结”的完整攻略。

Vue3中的Hooks总结

什么是Hooks？

Hooks是Vue3中新增的API，是一组可重用状态逻辑（如设置计时器或订阅数据源），它们可以按照需要任意组合，以用于构建自定义的Vue函数式组件。使用Hooks的函数式组件让我们使逻辑更加封装和优雅，且更易于迭代和测试。

总体而言，Hooks的目的是在不编写类组件的情况下，让开发者能够在函数系组件中使用各种React的特性，例如状态、生命周期，及其他React方法等。

Vue3中的Hooks种类

useState

vue3使用reactive代替了vue2的Object.defineProperty来追踪响应式对象的改变，因此用reactive建立响应式对象和ref建立响应式标量很简单，但是建一个保存状态的变量却一点也不简单了，难道只能使用data？No！Vue3为我们这样的开发者准备了‘useState’这个Hook来改变函数组件的状态。

示例代码：

<template>
  <button @click="increment">点击我计数+1</button>
</template>

<script>
import { useState } from 'vue'

export default {
  setup () {
    const [count, setCount] = useState(0)
    const increment = () => setCount(count + 1)

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

当我们点击按钮时，count将从0变为1，Hook将在内存中保存状态。

useEffect

如果您有使用过React，则一定会知道React的useEffect，Vue3版的useEffect和React中的useEffect非常类似。这里的 useEffect Hook 可以理解为 Vue2 中的 mounted和updated 钩子的组合。

示例代码：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { reactive, ref, watch, onMounted, computed } from 'vue'

export default {
  setup () {
    // 设置响应式对象
    const state = reactive({
      count: 0
    })
    // 设置计算属性
    const message = computed(() => `count的值目前是 ${state.count}`)

    // useEffect 中要执行的操作
    const logOnUpdate = () => {
      console.log('每次 count 变化后，logOnUpdate会运行')
    }
    // useEffect 副作用
    watch(() => state.count, logOnUpdate)

    // mounted钩子
    onMounted(() => {
      console.log('mounted 钩子启动')
      setTimeout(() => {
        // 设置计数器
        state.count = 100
      }, 1000)
    })

    return {
      message
    }
  }
}
</script>

当数值实时更新时，logOnUpdate会运行，所以我们会在控制台看到log信息。当mounted执行时，我们会在控制台看到“mounted钩子启动”的log，一秒后计数器将增加到100。