Vue3 是一种流行的 JavaScript 框架，它引入了全新的组合式 API，在开发大型和复杂的应用程序时提供了更灵活和强大的工具。本文将详细介绍 Vue3 组合式 API 的特性、用法和最佳实践。
什么是组合式 API
组合式 API 是 Vue3 中新增的一种 API 风格，它允许开发者按逻辑关注点（如状态、计算属性、生命周期等）组织代码，而不是按照原来的选项对象方式。通过组合式 API，我们可以更方便地重用逻辑代码，提高代码的可读性和维护性。
setup 函数
在使用组合式 API 之前，我们需要先了解 setup 函数。setup 函数是一个特殊的函数，它是组件的入口点，并在组件创建之前被调用。在 setup 函数中，我们可以访问组件的 props、context 和 attrs 等。
import { ref } from 'vue'
export default {
props: {
message: String
},
setup(props) {
const count = ref(0)
const increment = () => {
count.value++
}
return {
count,
increment
}
}
}
在上述代码中，我们定义了一个名为 count 的响应式变量，并创建了一个名为 increment 的函数。这些变量和函数都可以在模板中使用，或者通过组件实例访问。
ref
在组合式 API 中，我们使用 ref 函数来创建响应式变量。ref 函数接收一个初始值，并返回一个包含 value 属性的对象。要访问或修改响应式变量的值，我们需要通过 .value 进行操作。
import { ref } from 'vue'
export default {
setup() {
const name = ref('John Doe')
const updateName = () => {
name.value = 'Jane Smith'
}
return {
name,
updateName
}
}
}
在上述代码中，我们创建了一个名为 name 的响应式变量，并定义了一个名为 updateName 的函数来更新其值。
computed
在 Vue3 中，我们可以使用 computed 函数创建计算属性。computed 函数接收一个函数作为参数，并返回一个具有 value 属性的响应式对象。计算属性的值会根据依赖的响应式变量自动更新。
import { ref, computed } from 'vue'
export default {
setup() {
const firstName = ref('John')
const lastName = ref('Doe')
const fullName = computed(() => {
return `${firstName.value} ${lastName.value}`
})
return {
firstName,
lastName,
fullName
}
}
}
在上述代码中，我们创建了两个响应式变量 firstName 和 lastName，并使用 computed 函数创建了一个计算属性 fullName。fullName 的值会根据 firstName 和 lastName 的变化自动更新。
watch
在 Vue3 中，我们可以使用 watch 函数来监听某个响应式变量的变化，并执行相关的逻辑。watch 函数接收两个参数：要监听的响应式变量和回调函数。当被监听的变量发生变化时，回调函数会被触发。
import { ref, watch } from 'vue'
export default {
setup() {
const count = ref(0)
watch(count, (newValue, oldValue) => {
console.log(`Count changed from ${oldValue} to ${newValue}`)
})
const increment = () => {
count.value++
}
return {
count,
increment
}
}
}
在上述代码中，我们创建了一个响应式变量 count，并使用 watch 函数监听其变化。当 count 的值发生变化时，回调函数会打印出旧值和新值。
生命周期钩子
在 Vue3 中，生命周期钩子函数发生了一些变化。取而代之的是，我们可以使用 onXxx 的命名约定来定义与生命周期对应的函数。
import { onMounted, onUnmounted } from 'vue'
export default {
setup() {
onMounted(() => {
console.log('Component mounted')
})
onUnmounted(() => {
console.log('Component unmounted')
})
}
}
在上述代码中，我们使用 onMounted 函数定义了组件被挂载后执行的逻辑。类似地，我们可以使用 onUnmounted 函数定义组件被卸载时执行的逻辑。
自定义 Hook
自定义 Hook 是一种常见的开发模式，它可以帮助我们更好地组织和复用逻辑代码。在 Vue3 中，我们可以使用函数来定义自定义 Hook。
import { ref, onMounted } from 'vue'
function useTimer() {
const timer = ref(null)
const startTimer = () => {
timer.value = setInterval(() => {
console.log('Timer tick')
}, 1000)
}
const stopTimer = () => {
clearInterval(timer.value)
timer.value = null
}
onMounted(() => {
startTimer()
})
return {
startTimer,
stopTimer
}
}
export default {
setup() {
const { startTimer, stopTimer } = useTimer()
return {
startTimer,
stopTimer
}
}
}
在上述代码中，我们定义了一个名为 useTimer 的自定义 Hook。该 Hook 提供了 startTimer 和 stopTimer 方法来启动和停止计时器。在 setup 函数中，我们通过解构赋值将这些方法返回给组件。
总结
本文详细介绍了 Vue3 组合式 API 的特性、用法和最佳实践。我们学习了 setup 函数、ref、computed、watch、生命周期钩子和自定义 Hook 等概念。
通过使用组合式 API，我们可以更好地组织和复用代码，提高开发效率和代码质量。
