深度了解vue.js中hooks的相关知识

什么是hooks？

Vue 3.0 采用了 Composition API，这是一种基于函数的API，包含了许多新的hooks（钩子函数），例如 setup()、onMounted()、onBeforeUnmount() 等。这些新的钩子函数不仅可以让我们更加方便地组合逻辑，还可以提高代码的可读性和可复用性。

基本用法

setup()

setup() 函数是一个新的函数式组件API的入口。它在组件实例创建前执行，它可以返回一个对象，包含组件需要的数据、方法等内容。

示例代码：

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

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

export default {
  setup() {
    const message = ref('Hello, world!')

    const reverseMessage = computed(() => {
      return message.value.split('').reverse().join('')
    })

    return {
      message,
      reverseMessage
    }
  }
}
</script>

在上面的示例中，我们先引入了 ref 和 computed，分别用于创建响应式的数据和计算属性。然后在 setup() 函数中创建了一个名为 message 的响应式数据和一个名为 reverseMessage 的计算属性，并将这两个属性都返回。这样，在模板中就可以通过 {{ message }} 和 {{ reverseMessage }} 访问到这两个数据了。

onMounted()

onMounted() 函数会在组件挂载后立即调用，它可以用来执行一些异步操作，例如请求数据、初始化组件等。

示例代码：

<template>
  <div>
    <p v-if="loading">Loading...</p>
    <ul v-else>
      <li v-for="item in items">{{ item }}</li>
    </ul>
  </div>
</template>

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

export default {
  setup() {
    const items = ref([])
    const loading = ref(true)

    onMounted(async () => {
      const res = await fetch('https://api.example.com/items')
      const data = await res.json()
      items.value = data
      loading.value = false
    })

    return {
      items,
      loading
    }
  }
}
</script>

在上面的示例中，我们先创建了两个响应式数据 items 和 loading，其中 loading 的初始值为 true。然后在 onMounted() 中使用了 fetch() 来请求数据，并将请求到的数据赋值给了 items。最后，将 loading 的值改为 false。这样，在模板中就可以根据 loading 的值来显示加载中的文本或者展示数据列表了。

onBeforeUnmount()

onBeforeUnmount() 函数会在组件卸载前调用，它可以用来清理资源、取消订阅等操作。

示例代码：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="startTimer">Start Timer</button>
    <button @click="stopTimer">Stop Timer</button>
  </div>
</template>

<script>
import { ref, onBeforeUnmount } from 'vue'

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

    const startTimer = () => {
      intervalId = setInterval(() => {
        count.value++
      }, 1000)
    }

    const stopTimer = () => {
      clearInterval(intervalId)
    }

    onBeforeUnmount(() => {
      clearInterval(intervalId)
    })

    return {
      count,
      startTimer,
      stopTimer
    }
  }
}
</script>

在上面的示例中，我们创建了一个名为 count 的响应式数据和两个方法 startTimer 和 stopTimer，用于开始计时和停止计时。在 setup() 函数中，我们使用了 let 声明了一个变量 intervalId，用于保存定时器的 id。然后在 startTimer() 中调用了 setInterval() 来创建一个定时器，每隔一秒钟将 count 的值增加 1。在 stopTimer() 中调用了 clearInterval() 来停止定时器。最后，在 onBeforeUnmount() 中再次调用了 clearInterval() 来确保在组件卸载前停止了定时器。

总结

本篇文章介绍了 Vue 3.0 中的 Composition API 的基本用法，包括 setup()、onMounted() 和 onBeforeUnmount() 等钩子函数的使用，同时还给出了一些示例代码。希望这篇文章可以帮助你更好地理解 Vue 3.0 中的 Composition API，从而提高你的开发效率和代码质量。