Vue3 简介

1. Vue3简介

• 2020年9月18日，Vue.js发布版3.0版本，代号：One Piece（n
  
• 经历了：4800+次提交、40+个RFC、600+次PR、300+贡献者
  
• 官方发版地址：Release v3.0.0 One Piece · vuejs/core
  
• 截止2023年10月，最新的公开版本为：3.3.4
  

1.1【性能的提拔】

● 打包大小淘汰41%。
● 初次渲染快55%, 更新渲染快133%。
● 内存淘汰54%。
1.2【 源码的升级】

● 使用Proxy代替defineProperty实现相应式。
● 重写虚拟DOM的实现和Tree-Shaking。
1.3【拥抱TypeScript】

● Vue3可以更好的支持TypeScript。
1.4【新的特性】

• Composition API（组合API）：
  
  
  
  • setup
    
  • ref与reactive
    
  • computed与watch…
    
  
  
• 新的内置组件：
  
  
  
  • Fragment
    
  • Teleport
    
  • Suspense…
    
  
  
• 其他改变：
  
  
  
  • 新的生命周期钩子
    
  • data 选项应始终被声明为一个函数
    
  • 移除keyCode支持作为 v-on 的修饰符…
    
  
  

2. 创建Vue3工程

2.1. 【基于 vue-cli 创建】

点击查看 Vue CLI 官方文档
备注：目前vue-cli已处于维护模式，官方保举基于 Vite 创建项目

1. ## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
2.   vue --version
4.   ## 安装或者升级你的@vue/cli
5.   npm install -g @vue/cli
7.   ## 执行创建命令
8.   vue create vue_test
10.   ##  随后选择3.x
11.   ##  Choose a version of Vue.js that you want to start the project with (Use arrow keys)
12.   ##  > 3.x
13.   ##    2.x
15.   ## 启动
16.   cd vue_test
17.   npm run serve

复制代码

2.2. 【基于 vite 创建】(保举)

vite 是新一代前端构建工具，官网地址：https://vitejs.cn，vite的优势如下：

• 轻量快速的热重载（HMR），能实现极速的服务启动。
  
• 对 TypeScript、JSX、CSS 等支持开箱即用。
  
• 真正的按需编译，不再等候整个应用编译完成。
  
• webpack构建 与 vite构建对比图如下
  
  
  
  
• 详细操作如下（点击查看官方文档）
  

1. ## 1.创建命令
2.   npm create vue@latest
4.     ## 2.具体配置
5.     ## 配置项目名称
6.   √ Project name: vue3_test
7.   ## 是否添加TypeScript支持
8.   √ Add TypeScript?  Yes
9.     ## 是否添加JSX支持
10.   √ Add JSX Support?  No
11.     ## 是否添加路由环境
12.   √ Add Vue Router for Single Page Application development?  No
13.     ## 是否添加pinia环境
14.   √ Add Pinia for state management?  No
15.     ## 是否添加单元测试
16.   √ Add Vitest for Unit Testing?  No
17.     ## 是否添加端到端测试方案
18.   √ Add an End-to-End Testing Solution? » No
19.     ## 是否添加ESLint语法检查
20.   √ Add ESLint for code quality?  Yes
21.     ## 是否添加Prettiert代码格式化
22.   √ Add Prettier for code formatting?  No

复制代码

• 编写一个app组件
  

1. <template>
2.   <div class="app">
3.     <h1>你好啊！</h1>
4.   </div>
5. </template>
7. <script lang="ts">
8.   export default {
9.     name:'App' //组件名
10.   }
11. </script>
13. <style>
14.   .app {
15.     background-color: #ddd;
16.     box-shadow: 0 0 10px;
17.     border-radius: 10px;
18.     padding: 20px;
19.   }
20. </style>

复制代码

• 安装官方保举的vscode插件：
  

总结：

• Vite 项目中，index.html 是项目的入口文件，在项目最外层。
  
• 加载index.html后，Vite 解析 <script type="module" src="xxx"> 指向的JavaScript。
  
• Vue3 中是通过 createApp 函数创建一个应用实例。
  

2.3. 【简朴示例】

Vue3 向下兼容 Vue2 语法，且 Vue3 中的模板中可以没有根标签

1. <template>
2.   <div class="person">
3.     <h2>姓名：{{name}}</h2>
4.     <h2>年龄：{{age}}</h2>
5.     <button @click="changeName">修改名字</button>
6.     <button @click="changeAge">年龄+1</button>
7.     <button @click="showTel">点我查看联系方式</button>
8.   </div>
9. </template>
11. <script lang="ts">
12.   export default {
13.     name:'App',
14.     data() {
15.       return {
16.         name:'张三',
17.         age:18,
18.         tel:'13888888888'
19.       }
20.     },
21.     methods:{
22.       changeName(){
23.         this.name = 'zhang-san'
24.       },
25.       changeAge(){
26.         this.age += 1
27.       },
28.       showTel(){
29.         alert(this.tel)
30.       }
31.     },
32.   }
33. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。