整理的 Vue3.2 版本新特性，从升级到使用

最新推荐文章于 2025-04-16 16:44:46 发布

只是一组纤瘦的音节

最新推荐文章于 2025-04-16 16:44:46 发布

阅读量2.1k

点赞数 1

分类专栏： vue vuecli Vue3 文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_45397318/article/details/120781887

版权

本文介绍了Vue3.2的升级方法和新特性，包括`script setup`写法、`Teleport`与`Provide/Inject`的替代、`defineProps`与`defineEmits`的引入、Web Components的集成以及服务端渲染的改进。通过学习，开发者可以更好地理解和利用Vue3.2的新功能提升开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue3.2的官方文档
 Young村长B站视频

升级 Vue3.2

现在使用 npm install @vitejs/app 创建的 vue 项目都是 3.2 版本了

但是对以往的 vue 项目可以用下面的方式升级，当然编写的代码也可以修改

升级 node，到 14 以上吧，安装下 vite，然后运行 npm init @vitejs/app 然后一路选择 vue 或 vue-ts，如果要用 ts 的话

现有 Vue 项目升级 3.2 版本

npm i vue // 升级到 3.2
npm i @vue/compiler-sfc -D // 满足 Vite 工具对 SFC(就是平常所说的 .vue 文件) 的编译需求 
// 升级后查看 package.json 配置信息
 "dependencies": {
       
   "vue": "^3.2.20"
 },
 "devDependencies": {
       
   "@vue/compiler-sfc": "^3.2.20",
   "vite": "^1.0.0-rc.13"
 }

新特性

script setup 写法升级

废除 useContext，其功能被新增 API 替代了

新增 defineExpose，暴露接口供外界使用，不需要导入，在代码中直接用

// 子组件 child.vue 中暴露想要给组件外使用的数据与方法
const count = ref(0)
const someMethods = () => {
       
  console.log("Some message from HelloWorld");
}
defineExpose({
       
    count,
    someMethods 
})

// 父组件中导入子组件并在 setup 中调用子组件中的方法与数据
// html 
<template>
  <Child ref="child" />
</template>
<script setup>
  import {
        ref, onMounted } from 'vue'
  i

最低0.47元/天解锁文章