您当前的位置：主页 > 技术探讨 >

vue3新手教程入门

时间：2022-09-30 09:08 日记人：arlen.zhou

vue3不用说作为vue2的升级版本，性能优化肯定是有提升的，本篇文章主要是方便于刚入门的朋友快速开发认识用的。



vue3.0新特性有：1、性能比vue2.x块1.2～2倍；2、支持tree-shaking；3、引入了Composition API；4、暴露了自定义渲染API；5、新增三个组件（Fragment、Teleport、Suspense）等。

首先我们做项目肯定是要技术选型那么我们来对比下：

vue2:   vue+element+sass+axios+md5+vuex+webpack+node
vue3:   vue + element+sass+axios+md5+pina+vite+node+Typescript

上面就是我们做项目时候要选择的技术，UI框架无所谓，主要是看公司的项目和业务需求也可以用antd。从上面的配型可以看出有几个技术变化了，状态管理器变成了新的技术pina ，当然之前的也能用，只是新的技术更轻量方便.使用具体 请百度 很多文章描述：https://blog.csdn.net/u012384510/article/details/122007683

下面使我写了一个简单的使用列子：



你会发现上面的代码有了变化：
1、首先所有的代码都写在一个 <script lang="ts" setup> 这里面，这样写发既可以用 ts 也可以不用。
2、且所有 const 定义的内容在 html 里面 可以直接用。注意生命周期要 import 引入后才能使用。
3、变量申明最好全部写在上面，下面部分写业务逻辑，这样显得代码更有层次和方便管理。
4、ref 包裹的变量 修改页面才能检测到变化，对象用



好了目前要开发注意的事情暂时就是这些，后面慢慢更新其他的注意事项和内容吧！ts是否使用取决公司和项目情况，可用可不用。