前言
注意
现阶段并不建议使用VUE3,原因如下:
- 不再兼容IE11
- 三方的生态并不完善
- 相关文档并不完善,遇到问题相对不太好解决
但是VUE3和TS搭配体验相对较好。
VUE3 官网
尤大在 Vue 3.2 发布的时候已经在微博给出了最佳实践的解决方案:
<script setup>
+TS
+Volar
= 真香
Volar
是个 VS Code 的插件,其最大的作用就是解决了 template 的 TS 提示问题。
注意
使用它时,要先移除
Vetur
,以避免造成冲突。
<script setup>
是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。相比于普通的 script
语法,它具有更多优势:
- 更少的样板内容,更简洁的代码。
- 能够使用纯 Typescript 声明 props 和发出事件。
- 更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数,没有任何的中间代理)。
- 更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类型的工作)。
详见官方文档 单文件组件
Vite
创建项目
Vite 是一个 web 开发构建工具,由于其原生 ES 模块导入方式,可以实现闪电般的冷服务器启动。
通过在终端中运行以下命令,可以使用 Vite 快速构建 Vue 项目。
查看npm版本
1 | npm -v |
创建项目
1 | # npm 6.x |
注意:
1 | # npm 7+,需要加上额外的双短横线 |
如果报错
Error: Cannot find module ‘worker_threads’
原因是:
Vite 需要 Node.js 版本 >= 12.0.0。
添加TS/vue-router等
安装 typescript、vue-router@next、axios、eslint-plugin-vue、less等相关插件
1 | npm install axios |
vite.config.ts
vite.config.js
重命名为vite.config.ts
1 | import { UserConfig } from 'vite' |
router
在 src 下新建 router
文件夹,并在文件夹内创建 index.ts
1 | import { createRouter, createWebHashHistory } from 'vue-router' |
views
src
下添加views
文件夹
添加Home.vue
1 | <script setup></script> |
src
下的App.vue
中添加<router-view></router-view>
1 | <script setup> |
ts 配置
项目根目录下新建 tsconfig.json
写入相关配置
1 | { |
src 目录下新建 types
文件夹,里面需要配置 ts 的类型
shims-vue.d.ts
1 | declare module '*.vue' {} |
images.d.ts
1 | declare module '*.svg' |
main.ts
src
下的main.js
重命名为main.ts
1 | import { createApp } from 'vue' |
index.html
1 |
|
主要是
1 | <script type="module" src="/src/main.js"></script> |
修改为
1 | <script type="module" src="/src/main.ts"></script> |
VUE3 知识
setup
vue3 中用 setup 函数整合了所有的 api;只执行一次,在生命周期函数前执行,所以在 setup 函数中拿不到当前实例 this,不能用 this 来调用 vue2 写法中定义的方法
它将接受两个参数:props、context
1 | // props - 组件接受到的属性 context - 上下文 |
props
setup 函数中的 props 是响应式的,当传入新的 prop 时,它将被更新
但是,因为 props 是响应式的,不能使用 ES6 解构,因为它会消除 prop 的响应性
如果需要解构 prop,可以通过使用 setup 函数中的 toRefs 来安全地完成此操作
1 | import { toRefs } from 'vue' |
context
context 暴露三个组件的 property:{ attrs, slots, emit }
它是一个普通的 JavaScript 对象,不是响应式的,这意味着你可以安全地对 context 使用 ES6 解构
setup
方法和以下是等效的
1 | <script setup> |
生命周期
通过在生命周期钩子前面加上on
来访问组件的生命周期钩子
因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的,所以不需要显式地定义它们
换句话说,在这两个钩子中编写的任何代码都应该直接在 setup 函数中编写
1 | setup() { |
ref、reactive
ref 可以将某个普通值包装成响应式数据,仅限于简单值,内部是将值包装成对象,再通过 defineProperty 来处理的
通过 ref 包装的值,取值和设置值的时候,需用通过 .value来进行设置
可以用 ref 来获取组件的引用,替代 this.$refs 的写法
reactive 对复杂数据进行响应式处理,它的返回值是一个 proxy 对象,在 setup 函数中返回时,可以用 toRefs 对 proxy 对象进行结构,方便在 template 中使用
使用如下:
1 | <template> |
computed、watch
1 | // computed |
watchEffect
响应式地跟踪函数中引用的响应式数据,当响应式数据改变时,会重新执行函数
1 | const count = ref(0) |
还可以停止监听,watchEffect 返回一个函数,执行后可以停止监听
与 vue2 一样:
1 | const unwatch = this.$watch('say', curVal => {}) |
useRoute、useRouter
1 | import {useRoute, useRouter} from 'vue-router' |
vuex
使用 useStore 来获取 store 对象 从 vuex 中取值时,要注意必须使用 computed 进行包装,这样 vuex 中状态修改后才能在页面中响应
1 | import {useStore} from 'vuex' |
和TS结合
1 | <script setup lang="ts"> |
Vue Cli
1 | vue ui |
安装时VUE版本选择Vue3即可