写给React开发者的Vue 3教程

如果你是一个有经验的React开发者,并且对学习Vue 3感兴趣,那么这篇文章就是为你准备的。在这篇文章中,我们将探讨Vue 3的Composition API,并将其与React的Hooks进行比较。通过这种方式,你将能够快速理解Vue 3的核心概念,并将你的React知识应用到Vue 3的开发中。

在我们开始比较Vue 3的Composition API和React的Hooks之前,让我们先回顾一下它们各自的一些核心概念。

在Vue 3中,组件是由三部分组成的:模板(template)、逻辑(script)和样式(style)。模板定义了组件的结构,逻辑定义了组件的行为,样式定义了组件的外观。Vue 3使用声明式的模板语法,通过指令(如v-if, v-for)和插值(如{{ }}),将数据与DOM进行绑定。

在React中,组件通常是用JavaScript(或TypeScript)编写的函数或类。React使用JSX,一种类似XML的语法,来描述组件的结构。在JSX中,你可以直接使用JavaScript表达式,这使得在组件逻辑和模板之间切换非常容易。

Vue 3的Composition API和React的Hooks都是为了解决在组件中管理状态和逻辑的问题而引入的。它们都允许你在组件外部定义和重用有状态的逻辑。这使得组件的逻辑更加模块化和可复用。

然而,Vue 3的Composition API和React的Hooks在实现方式上有一些区别。Vue 3的Composition API更加依赖于响应式系统,通过reactive, ref等函数创建响应式状态,并通过watch, computed等函数来响应状态的变化。React的Hooks则更加依赖于JavaScript的函数特性,通过useState, useEffect等函数来管理状态和副作用。

接下来,我们将通过比较Vue 3的Composition API和React的Hooks在处理状态管理、计算属性、副作用等方面的异同,来帮助你更好地理解它们。

1. Vue 3 Composition API与React Hooks的比较

1.1 状态管理: useState 和 ref,reactive

在React中,我们使用useState钩子来管理组件的状态:

const [count, setCount] = useState(0)

在Vue 3中,我们可以使用ref或reactive来创建响应式状态:

const count = ref(0)
// 或
const state = reactive({ count: 0 })

ref用于创建一个包含单个值的响应式引用,而reactive用于创建一个响应式对象。

1.2 计算属性: useMemo 和 computed

在React中,我们可以使用useMemo钩子来创建一个记忆化的值,它只在其依赖项发生变化时才会重新计算:

const doubledCount = useMemo(() => count * 2, [count])

在Vue 3中,我们可以使用computed函数来创建一个计算属性:

const doubledCount = computed(() => count.value * 2)

计算属性会自动跟踪其依赖项,并在依赖项发生变化时更新。不同于useMemo,computed会返回一个新的响应式引用,而不是一个普通的值。

1.3 副作用: useEffect 和 watch,watchEffect

在React中,我们使用useEffect钩子来执行副作用,如订阅事件或发起HTTP请求:

useEffect(() => {
  document.title = `You clicked ${count} times`
}, [count])

在Vue 3中,我们可以使用watch或watchEffect来执行副作用:

watch(count, (newCount) => {
  document.title = `You clicked ${newCount} times`
})
// 或
watchEffect(() => {
  document.title = `You clicked ${count.value} times`
})

watch允许你显式地指定要监视的数据源,而watchEffect会自动跟踪其回调函数中使用的所有响应式状态。不同于computed,watch和watchEffect不会返回新的值,而是执行副作用。

2. Vue 3 Composition API的其他特性

2.1 生命周期: onMounted, onUpdated等

Vue 3提供了一组与Vue 2生命周期钩子相对应的函数,如onMounted, onUpdated和onUnmounted:

onMounted(() => {
  console.log('Component mounted')
  // 在这里执行一些初始化操作,如发起HTTP请求或订阅事件
})

onUpdated(() => {
  console.log('Component updated')
  // 在这里执行一些在组件更新后需要进行的操作
})

onUnmounted(() => {
  console.log('Component unmounted')
  // 在这里执行一些清理操作,如取消订阅或清除定时器
})

这些函数允许你在组件的特定生命周期阶段执行逻辑。它们类似于React的useEffect钩子,但提供了更细粒度的控制。

2.2 依赖注入: provide 和 inject

Vue 3提供了provide和inject函数,用于在组件层次结构中共享状态:

// 在父组件中
const ThemeProvider = {
  setup() {
    const theme = ref('dark')
    provide('theme', theme)
    return {}
  }
}

// 在子组件中
const ThemeConsumer = {
  setup() {
    const theme = inject('theme', 'light')
    return { theme }
  }
}

在这个例子中,父组件ThemeProvider使用provide函数提供了一个名为theme的状态,其初始值为'dark'。子组件ThemeConsumer使用inject函数注入这个状态,如果没有找到提供者,则使用默认值'light'。

通过provide和inject,你可以避免通过props逐层传递数据,这在处理深层嵌套的组件树时非常有用。此外,由于注入的状态是响应式的,当提供者更新状态时,所有注入该状态的组件都会自动更新。

2.3 <script setup>语法糖

Vue 3引入了一种新的编写组件的方式,称为<script setup>。这是一种编译时的语法糖,它让我们可以更简洁地使用Composition API。

使用<script setup>,我们可以直接在<script>标签中编写组件的逻辑,而不需要显式地定义setup函数并返回一个对象:

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

在<script setup>中定义的变量和函数可以直接在模板中使用,不需要再通过setup函数返回。这使得组件的定义更加简洁和直观。

3. Composition API Q&A

3.1 computed 和 watch 的区别

computed用于创建一个依赖于其他状态的新的响应式引用。它是一个带有缓存的getter,只在其依赖项发生变化时才会重新计算,并返回一个新的值。

watch用于在特定状态发生变化时执行副作用。它不会创建新的值,而是执行一些操作,如发起HTTP请求或修改DOM。

3.2 ref 和 reactive 的区别

ref用于创建一个包含单个值的响应式引用。当你需要将一个原始值(如字符串或数字)变成响应式时,可以使用ref。在访问或修改ref创建的响应式引用时,需要使用.value属性:

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

reactive用于创建一个响应式对象。当你有一个对象,并且想让整个对象都变成响应式时,可以使用reactive。在访问或修改reactive创建的响应式对象时,不需要使用.value属性:

const state = reactive({ count: 0 })
console.log(state.count) // 0

state.count++
console.log(state.count) // 1

这是因为reactive返回的是一个Proxy对象,它会自动解包内部的属性,使其也成为响应式的。

另一个区别是,ref可以接受任何类型的值作为参数,而reactive只接受对象(包括数组和自定义对象)作为参数。

在大多数情况下,你可以根据数据的类型选择使用ref或reactive。如果数据是一个基本类型的值,使用ref;如果数据是一个对象,使用reactive。

3.3 watch 和 watchEffect 的区别

watch允许你显式地指定要监视的数据源。它适用于那些依赖项在初始渲染时可能还不存在的情况。

watchEffect会自动跟踪其回调函数中使用的所有响应式状态。它更适合用于那些依赖项在初始渲染时就已经存在的情况。

总结

Vue 3的Composition API提供了一种强大而灵活的方式来组织组件逻辑。对于有React经验的开发者来说,许多概念(如状态管理、计算属性和副作用)都会非常熟悉。通过理解ref, reactive, computed, watch等函数的作用和区别,你可以快速上手Vue 3的开发。

当然,这只是一个概览。Vue 3还有许多其他的特性和概念,如模板语法、组件系统、过渡效果等。但通过掌握Composition API,你已经迈出了理解Vue 3的重要一步。希望这篇文章能对你的Vue 3学习之旅有所帮助。