vue3基础知识

vue3优点

1. 性能提升（更快更少）
2. 源码升级
   • 使用proxy代替difineproperty
   • 重写虚拟dom和tree -shaking
3. 有typescript
4. 新特性

1. 创建项目

1.1 使用vue-cli

vue create xxx 

<!--选择vue3模板-->

1.2 使用vite创建

什么是vite

新一代前端构建工具

优势：

• 开发环境中，无需打包操作，可快速的冷启动。
• 轻量快速的热重载(HMR)。
• 真正的按需编译，不再等待整个应用编译完成。

//安装vite 
npm init @vitejs/app
//创建工程
npm init vite-app <project-name>

npm init @vitejs/app my-vue-app -- --template vue

//进入工程目录
cd <project-name>
//安装依赖
npm install
//运行
npm run dev

发现bug 说少东西 使用如下指令

node ./node_modules/esbuild/install.js

2. 常用组合式 API

2.1 Setup

1. 理解： 3.0的新配置项，值是一个函数
2. setup是组合式api 表演的舞台
3. 数据方法都配置在setup中。
4. setup函数 两种返回值
   1. 若返回一个对象，则对象中的属性、方法,在模板中均可以直接使用。(重点关注! )
   2. 若返回一个渲染函数:则可以自定义渲染内容。(了解)
5. 注意点:
   1. 尽量不要与Vue2.x配置混用
   2. Vue2.x配置(data、methos、computed…）)中可以访问到setup中的属性、方法。
   3. 但在setup中不能访问到Vue2.x配置(data、methos、computed…)。
   4. 如果有重名, setup优先。
   5. setup不能是一个async函数，因为返回值不再是return的对象,而是promise,模板看不到return对象中的属性。

2