01. Vue3 技术栈知识全家桶（vue3 + typescript + vite），详细整理，面试必备，持续更新！！！

前端小砖er

已于 2024-02-06 13:51:19 修改

阅读量1.5k

点赞数 30

CC 4.0 BY-SA版权

分类专栏： VUE3从0到1渐近式学习文章标签： vue 前端 typescript

于 2024-01-30 20:16:03 首次发布

本文链接：https://blog.csdn.net/weixin_44121341/article/details/135938779

VUE3从0到1渐近式学习专栏收录该内容

17 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了Vue3的关键特性，包括性能提升、拥抱Typescript和新的组合式API等，并提供了如何使用Vite初始化Vue3项目的步骤。重点讲述了Proxy在Vue3中代替Object.defineProperty的角色及其优势，对于面试和实战开发极具价值。

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

一、Vue3的简介

2020年9月18日，Vue.js发布3.0版本，相比Vue2主要有以下几个优势：

1.性能的提升：

打包速度提升、初次渲染快、内存减小；

2.拥抱Typescript：

typescript安装、原始数据类型、任意值；
联合类型、推断类型、对象接口类型；

3.新的特性：

3.1.使用组合式API

ref和reactive
setup配置
新的生命周期钩子
toRef 和 toRefs函数应用
watch和watchEffect
provide和inject

3.2.新的内置组件

Fragment
Teleport
Suspence

*3.3.Proxy替换Object.defineProperty（面试必备！！！）

使用了ES6中的Proxy代理对象来替代Object.defineProperty()方法
Proxy对象可以拦截对象上的一些操作，比如读取、修改、删除等，从而实现更加灵活的响应式更新

3.4.其他改变

data选项应该始终被声明为一个函数
移除keyCode支持做为v-on的修饰符

二、如何初始化一个Vue3项目

创建vue3项目分为以下两种方式：

1.使用vite创建

1.1.什么是vite？

新一代前端构建工具
按需求编译，不需要等待整个应用编译完成
轻量快速的热重载

1.2.使用vite的创建步骤

## 创建工程
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev

2.使用vue-cli创建

2.1.使用vue-cli的创建步骤

## 全局安装或者升级@vue/cli
npm install -g @vue/cli
## 创建项目
vue create xxxx
## 选择 vue3,Vue安装成功
## 执行指令,启动报错
cd vue-webpack  
npm run serve
## 解决方案、启动项目
npm i vue@3.2.26
npm run serve