Vue 3.2新特性入门指南：从零开始学习

Vue 3.2即将发布，带来了很多令人期待的新特性。本文是一份入门指南，从零开始介绍Vue 3.2的核心变化。需要说明的是，Vue 3.2目前还是beta版本，最终发布时API可能会有调整。

一、为什么关注Vue 3.2

Vue 3.0发布已经有一段时间了，Composition API让Vue的代码组织方式发生了很大变化。但在实际使用中，Composition API的写法还是有些繁琐，需要import很多函数，也需要在setup函数末尾return大量变量和方法。

Vue 3.2的一个主要目标就是简化Composition API的写法，让日常开发更顺手。同时还带来了CSS变量注入、Web Components支持、响应式系统性能提升等新特性。

我最近用Vue 3.2的beta版本做了一个小项目，体验了这些新特性，本文是我的学习笔记，分享给大家。

二、script setup语法糖

这是Vue 3.2最大的新特性，也是我最喜欢的一个。

什么是script setup

script setup是一个编译时的语法糖，让你在script标签里直接写Composition API的代码，不需要写setup函数，也不需要手动return变量和函数。

在Vue 3.1及之前，你需要这样写：

<script>
import { ref, computed } from 'vue'
export default {
  setup() {
    const count = ref(0)
    const double = computed(() => count.value * 2)
    function increment() {
      count.value++
    }
    return { count, double, increment }
  }
}
</script>

在Vue 3.2的script setup里，可以简化成这样：

<script setup>
import { ref, computed } from 'vue'
const count = ref(0)
const double = computed(() => count.value * 2)
function increment() {
  count.value++
}
</script>

是不是简洁了很多？顶层的变量和函数会自动暴露给模板，模板里可以直接使用。

script setup的优点

代码更简洁，少了很多样板代码。
更好的TypeScript支持，因为不需要处理return的类型推导。
更好的运行时性能，编译器在编译阶段做了优化。
支持顶层await，可以异步导入组件或数据。

props和emit的声明

在script setup里，props和emit需要用defineProps和defineEmits来声明：

<script setup>
const props = defineProps({
  title: String,
  count: Number
})
const emit = defineEmits(['update', 'delete'])
</script>

defineProps和defineEmits是编译器宏，不需要import，直接使用即可。

暴露给父组件

默认情况下，script setup里的变量和函数是私有的，父组件通过ref访问不到。如果需要暴露给父组件，要用defineExpose：

<script setup>
import { ref } from 'vue'
const count = ref(0)
defineExpose({ count })
</script>

三、CSS变量注入

Vue 3.2的另一个实用新特性是CSS变量注入，可以在组件的style里直接引用组件的响应式状态。

使用方法

用v-bind函数在CSS中引用组件变量：

<script setup>
import { ref } from 'vue'
const color = ref('red')
const fontSize = ref('16px')
</script>
<template>
  <div class="text">Hello</div>
</template>
<style>
.text {
  color: v-bind(color);
  font-size: v-bind(fontSize);
}
</style>

当color或fontSize变化时，CSS会自动更新，不需要手动操作DOM。

应用场景

这个特性让动态样式变得非常简单。以前要动态改样式，需要用内联样式或者CSS类名切换，现在可以直接在CSS里引用组件变量。比如做主题切换，只需要改变量的值，所有用到这个变量的CSS都会自动更新。

四、Web Components支持

Vue 3.2新增了defineCustomElement函数，可以用Vue的语法来创建原生的Web Components。

import { defineCustomElement } from 'vue'
const MyElement = defineCustomElement({
  props: ['title'],
  template: `<h1>{{ title }}</h1>`
})
customElements.define('my-element', MyElement)

然后就可以在HTML里直接使用：

<my-element title="Hello"></my-element>

Web Components是浏览器原生支持的组件标准，可以在任何框架甚至纯HTML中使用。用Vue来创建Web Components，可以利用Vue的响应式系统和模板语法，同时获得跨框架兼容性。对于做组件库的团队来说，这个特性很有价值。

五、性能提升

Vue 3.2在性能上也做了不少优化：

响应式系统优化：减少了内存占用，提升了依赖追踪的速度，在大型应用中提升更明显。
编译器优化：生成的渲染代码更高效，运行时更快。
SSR优化：服务端渲染的流式渲染效率更高。

这些性能优化用户不需要改代码，升级到3.2就能享受到。

六、新的工具库

Vue 3.2还发布了两个独立的官方工具库：

@vue/reactivity：响应式系统的独立包，可以在Vue之外使用，比如在Node.js或其他框架中。你可以用ref、reactive、computed等API，不依赖Vue的组件系统。
@vue/server-renderer：服务端渲染器的独立包，可以更灵活地集成SSR。

七、升级方式

升级到Vue 3.2很简单：

npm install vue@3.2

Vue 3.2是向后兼容的，大部分项目不需要改代码，直接升级即可。如果要使用script setup，需要把Vite或vue-loader升级到最新版本，因为需要编译器支持新语法。

八、注意事项

beta版本可能有bug：目前还是beta阶段，不建议直接用在生产环境，等正式版发布更稳妥。
script setup的API可能调整：虽然已经讨论了很久，但正式版之前API仍有可能变化。
工具链需要升级：使用新特性需要升级Vite、vue-loader、TypeScript等工具链。
浏览器兼容性：Web Components需要现代浏览器支持，如果需要兼容IE就不能使用。

九、给初学者的建议

如果你是Vue初学者，想学习Vue 3.2，我的建议是：

先打好Vue 3基础：在学新特性之前，先把响应式、组件、生命周期、Composition API等基础概念理解透彻。
从script setup开始：这是最实用的新特性，能显著提升开发体验。
多写多练：学习前端框架最好的方法就是动手做项目，在实践中理解。
看官方文档：Vue的官方文档写得很详细，学新特性先看官方文档比看二手资料更准确。

十、写在最后

Vue 3.2带来了很多令人期待的变化，script setup让Composition API更简洁，CSS变量注入让动态样式更方便，Web Components支持让Vue组件可以跨框架使用，还有性能提升和独立工具库。

虽然目前还是beta版本，但这些新特性已经很值得期待了。Vue一直在进化，变得更强大、更好用，作为Vue用户，我很开心看到这些进步。

最后用一句话结束本文：好的框架，是让开发者写更少的代码，做更多的事情。