德胜云资讯,添加一些关于程序相关的内容,仅供大家学习交流(https://www.wxclwl.com)
日期:2023/03/23 15:09作者:黎宏儒人气:
文章来自:
主要分几个方面总结:
Vue3
Vite
VueRouter
Pinia
ElementPlus
一、Vue3
1. Vue2.x 和 Vue3.x 生命周期方法的变化
文档地址:v3.cn.vuejs.org/guide/composition-api-lifecycle-hooks.html
Vue2.x 和 Vue3.x 生命周期方法的变化蛮大的,先看看:
目前 Vue3.x 依然支持 Vue2.x 的生命周期,但不建议混搭使用,前期可以先使用 2.x 的生命周期,后面尽量使用 3.x 的生命周期开发。
由于我使用都是 模式,所以都是直接使用 Vue3.x 的生命周期函数:
每个钩子的执行时机点,也可以看看文档:https://v3.cn.vuejs.org/guide/instance.html
2. script-setup 模式中父组件获取子组件的数据
文档地址:v3.cn.vuejs.org/api/sfc-script-setup.html#defineexpose
这里主要介绍父组件如何去获取子组件内部定义的变量,关于父子组件通信,可以看文档介绍比较详细:https://v3.cn.vuejs.org/guide/component-basics.html
我们可以使用全局编译器宏的宏,将子组件中需要暴露给父组件获取的参数,通过 方式作为参数即可,父组件通过模版 ref 方式获取子组件实例,就能获取到对应值:
注意:
全局编译器宏只能在 script-setup 模式下使用;
script-setup 模式下,使用宏时无需 可以直接使用;
script-setup 模式一共提供了 4 个宏,包括:defineProps、defineEmits、defineExpose、withDefaults。
3. 为 props 提供默认值
definedProps 文档:v3.cn.vuejs.org/api/sfc-script-setup.html
前面介绍 script-setup 模式提供的 4 个全局编译器宏,还没有详细介绍,这一节介绍 和 。使用 宏可以用来定义组件的入参,使用如下:
这里只定义属性中的 和 两个属性的类型, 的这种声明的不足之处在于,它没有提供设置 props 默认值的方式。
其实我们可以通过 withDefaults 这个宏来实现:
withDefaults 辅助函数提供了对默认值的类型检查,并确保返回的 props 的类型删除了已声明默认值的属性的可选标志。
4. 配置全局自定义参数
文档地址:v3.cn.vuejs.org/guide/migration/global-api.html
在 Vue2.x 中我们可以通过 添加全局属性 property。但是在 Vue3.x 中需要将 替换为 配置:
使用时需要先通过 vue 提供的 方法获取实例对象:
其中 内容输出如下:
5. v-model 变化
文档地址:v3.cn.vuejs.org/guide/migration/v-model.html
当我们在使用 指令的时候,实际上 和 组合的简写,Vue2.x 和 Vue3.x 又存在差异。
Vue2.x
在子组件中,如果要对某一个属性进行双向数据绑定,只要通过 就能更新其 绑定的值。
Vue3.x
模式下就不能使用 去派发更新事件,毕竟没有 ,这时候需要使用前面有介绍到的 defineProps、defineEmits 两个宏来实现:
父组件使用的时候就很简单:
6. 开发环境报错不好排查
文档地址:v3.cn.vuejs.org/api/application-config.html#errorhandler
Vue3.x 对于一些开发过程中的异常,做了更友好的提示警告,比如下面这个提示:
这样能够更清楚的告知异常的出处,可以看出大概是 这边的问题,但还不够清楚。这时候就可以添加 Vue3.x 提供的全局异常处理器,更清晰的输出错误内容和调用栈信息,代码如下:
这时候就能看到输出内容如下:
一下子就清楚很多。当然,该配置项也可以用来集成错误追踪服务 Sentry 和 Bugsnag。推荐阅读:Vue3 如何实现全局异常处理?
7. 观察 ref 的数据不直观,不方便
当我们在控制台输出 声明的变量时。
会看到控制台输出了一个 对象:
看起来很不直观。我们都知道,要获取和修改 声明的变量的值,需要通过 来获取,所以你也可以:
这里还有另一种方式,就是在控制台的设置面板中开启 「Enable custom formatters」选项。
这时候你会发现,控制台输出的 的格式发生变化了:
更加清晰直观了。
这个方法是在《Vue.js 设计与实现》中发现的,但在文档也没有找到相关介绍
二、Vite
1. Vite 动态导入的使用问题
文档地址:cn.vitejs.dev/guide/features.html#glob-import
使用 webpack 的同学应该都知道,在 webpack 中可以通过 动态导入文件:
在 Vite 中,我们可以使用这两个方法来动态导入文件:
该方法匹配到的文件默认是懒加载,通过动态导入实现,构建时会分离独立的 chunk,是异步导入,返回的是 Promise,需要做异步操作,使用方式如下:
该方法是直接导入所有模块,并且是同步导入,返回结果直接通过 循环就可以操作,使用方式如下:
如果仅仅使用异步导入 Vue3 组件,也可以直接使用 Vue3 defineAsyncComponent API 来加载:
2. Vite 配置 alias 类型别名
文档地址:cn.vitejs.dev/config/#resolve-alias
当项目比较复杂的时候,经常需要配置 alias 路径别名来简化一些代码:
在 Vite 中配置也很简单,只需要在 的 中配置即可:
如果使用的是 typescript 时,编辑器会提示路径不存在的警告⚠️,这时候可以在 中添加 的配置:
3. Vite 配置全局 scss
文档地址:cn.vitejs.dev/config/#css-preprocessoroptions
当我们需要使用 scss 配置的主题变量(如 )、mixin方法(如 )等时,如:
我们可以将 scss 主题配置文件,配置在 的 中:
如果不想使用 scss 配置文件,也可以直接写成 scss 代码:
三、VueRouter
1. script-setup 模式下获取路由参数
文档地址:router.vuejs.org/zh/guide/advanced/composition-api.html
由于在 模式下,没有 可以使用,就不能直接通过 或 来获取路由参数和跳转路由。当我们需要获取路由参数时,就可以使用 提供的 方法来获取,使用如下:
如果要做路由跳转,就可以使用 方法的返回值去跳转:
四、Pinia
1. store 解构的变量修改后没有更新
文档地址:pinia.vuejs.org/concepts/#using-the-store
当我们解构出 store 的变量后,再修改 store 上该变量的值,视图没有更新:
这时候点击按钮触发 事件后,视图上的 并没有变化。这是因为 store 是个 reactive 对象,当进行解构后,会破坏它的响应性。所以我们不能直接进行解构。这种情况就可以使用 Pinia 提供 工具方法,使用起来也很简单,只需要将需要解构的对象通过 方法包裹,其他逻辑不变:
这样再修改其值,变更马上更新视图了。
2. Pinia 修改数据状态的方式
按照官网给的方案,目前有三种方式修改:
通过 赋值修改单笔数据的状态;
这个方法就是前面一节使用的:
通过 方法修改多笔数据的状态;
文档地址:pinia.vuejs.org/api/interfaces/pinia._StoreWithState.html#patch
当我们需要同时修改多笔数据的状态时,如果还是按照上面方法,可能要这么写:
上面这么写也没什么问题,但是 Pinia 官网已经说明,使用 的效率会更高,性能更好,所以在修改多笔数据时,更推荐使用 ,使用方式也很简单:
通过 方法修改多笔数据的状态;
也可以在 store 中定义 actions 的一个方法来更新:
使用时:
这三种方式都能更新 Pinia 中 store 的数据状态。
五、Element Plus
1. element-plus 打包时 @charset 警告
项目新安装的 element-plus 在开发阶段都是正常,没有提示任何警告,但是在打包过程中,控制台输出下面警告内容:
在官方 issues 中查阅很久:github.com/element-plus/element-plus/issues/3219%E3%80%82
尝试在 中配置 ,结果也是无效:
最后在官方的 issues 中找到处理方法:
2. 中文语言包配置
文档地址:element-plus.gitee.io/zh-CN/guide/i18n.html
默认 elemnt-plus 的组件是英文状态:
我们可以通过引入中文语言包,并添加到 ElementPlus 配置中来切换成中文:
这时候就能看到 ElementPlus 里面组件的文本变成中文了。