【Vuejs】1426- 深入解析 Vue 3 基础难点
希望本篇文章能帮你加深对 Vue 的理解,能信誓旦旦地说自己熟练Vue2/3。
内容混杂用法
+ 原理
+ 使用小心得
,建议收藏,慢慢看。
区别
生命周期的变化
整体来看,变化不大,只是名字大部分需要 + on
,功能上类似。使用上 Vue3 组合式 API 需要先引入;Vue2 选项 API 则可直接调用,如下所示。
// vue3
<script setup>
import { onMounted } from 'vue'onMounted(() => {...
})
// 可将不同的逻辑拆开成多个onMounted,依然按顺序执行,不被覆盖
onMounted(() => {...
})
</script>// vue2
<script> export default { mounted() { ... }, }
</script>
常用生命周期表格如下所示。
Vue2.x | Vue3 |
---|---|
beforeCreate | Not needed* |
created | Not needed* |
beforeMount | onBeforeMount |
mounted | onMounted |
beforeUpdate | onBeforeUpdate |
updated | onUpdated |
beforeDestroy | onBeforeUnmount |
destroyed | onUnmounted |
Tips: setup
是围绕beforeCreate
和created
生命周期钩子运行的,所以不需要显式地去定义。
多根节点
Vue3 支持了多根节点组件,也就是fragment
。
Vue2中,编写页面的时候,我们需要去将组件包裹在<div>
中,否则报错警告。
<template><div><header>...</header><main>...</main><footer>...</footer></div>
</template>
Vue3,我们可以组件包含多个根节点,可以少写一层,niceeee !
<template><header>...</header><main>...</main><footer>...</footer>
</template>
异步组件
Vue3 提供 Suspense
组件,允许程序在等待异步组件时渲染兜底的内容,如 loading ,使用户体验更平滑。使用它,需在模板中声明,并包括两个命名插槽:default
和fallback
。Suspense
确保加载完异步内容时显示默认插槽,并将fallback
插槽用作加载状态。
<tempalte><suspense><template #default><todo-list /></template><template #fallback><div>Loading...</div></template></suspense>
</template>
真实的项目中踩过坑,若想在 setup 中调用异步请求,需在 setup 前加async
关键字。这时,会受到警告async setup() is used without a suspense boundary
。
解决方案:在父页面调用当前组件外包裹一层Suspense
组件。
Teleport
Vue3 提供Teleport
组件可将部分DOM移动到 Vue app之外的位置。比如项目中常见的Dialog
组件。
<button @click="dialogVisible = true">点击</button>
<teleport to="body"><div class="dialog" v-if="dialogVisible"></div>
</teleport>
组合式API
Vue2 是 选项式API(Option API)
,一个逻辑会散乱在文件不同位置(data、props、computed、watch、生命周期函数等),导致代码的可读性变差,需要上下来回跳转文件位置。Vue3 组合式API(Composition API)
则很好地解决了这个问题,可将同一逻辑的内容写到一起。
除了增强了代码的可读性、内聚性,组合式API 还提供了较为完美的逻辑复用性方案,举个
【Vuejs】1426- 深入解析 Vue 3 基础难点相关推荐
- 【vuejs深入三】vue源码解析之二 htmlParse解析器的实现
写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 昨天博主分析了一下在vue中,最为基础核心的api,parse函数,它的作用是将vue的模板字符串转换成ast,从而 ...
- ❤️《Vue前端基础框架集合从入门到高级》(小白也可学,建议收藏)❤️
<Vue前端基础框架集合从入门到高级>,小白也可学 文章目录 <Vue前端基础框架集合从入门到高级>,小白也可学 ❤️一.前端核心分析 ❤️1.1.概述 ❤️1.2.前端三要素 ...
- Vue的基础入门及使用
Vue的基础入门及使用 第一章 Vue核心 1.1 Vue的基本认识 1.1.1 官网 英文官网:https://vuejs.org/ 中文官网:https://cn.vuejs.org/ 1.1.2 ...
- vue脚手架基础API全面讲解【内附多个案例】
vscode-插件补充 vue文件代码高亮插件-vscode中安装 代码提示插件-vscode中安装 知识点自测 想学会今天的内容, 先测测这几个会不会 表达式, 变量是什么 new的作用和含义 实例 ...
- Vue.js 官方团队成员霍春阳新作,深入解析 Vue.js 设计细节
霍春阳(Hcy),Vue.js 官方团队成员.专注于 Web 研发领域,是 Vue.js 3 的核心贡献者之一,Vue.js 文档生成工具 Vuese 的作者,技术社区活跃者,曾撰写大量颇受好评的技术 ...
- 手摸手教你使用vue-cli脚手架-详细步骤图文解析[vue入门]
写在前面: 使用 vue-cli 可以快速创建 vue 项目,vue-cli很好用,但是在最初搭建环境安装vue-cli及相关内容的时候,对一些人来说是很头疼的一件事情,本人在搭建vue-cli的项目 ...
- Vue.js 官方团队成员霍春阳新作,深入解析 Vue.js 设计细节【文末送书】
霍春阳(Hcy),Vue.js 官方团队成员.专注于 Web 研发领域,是 Vue.js 3 的核心贡献者之一,Vue.js 文档生成工具 Vuese 的作者,技术社区活跃者,曾撰写大量颇受好评的技术 ...
- Vue的基础认知一---构建环境/v指令的使用
大家新年好啊,不对,今天是情人节呢,哈哈哈,祝大家节日快乐,你们是不是都出去约约约了啊,好吧,你们都去玩吧,我在家码代码,汗~讲真,这大过年的实在是不愿意学习啊,可是眼看着好久没写博文了,心里有点过意 ...
- 使用Vue3学习Vue的基础知识
创建 Vue 应用 vue的安装有多种方式,本文只讨论基础知识,其他安装方式请自行查阅官网 https://v3.cn.vuejs.org/guide/installation.html 本文使用CD ...
最新文章
- linux ccenteros 部署 redis
- Java:对double值进行四舍五入,保留两位小数的几种方法
- t-sql中的事务控制及错误处理
- 字符串查找字符出现次数_查找字符串作为子序列出现的次数
- windows 下 opencv 3.x 的安装及常见问题的解决
- JSP中使用script计算
- 完全背包问题(详细解答)
- Echarts绘制极坐标系下的多色柱状图
- css字的大小,css 中字体大小
- Android系统 —— 各版本代号和对应API等级一览
- 3229: 硬币组合
- 百度地图定位不准的问题
- centos7 linux重置密码
- 计算机网络——tcpdump/Wireshark抓包实战
- traditional 和conventional区别
- 美通社日历 | 媒体关注、会展信息、企业财报发布,节假日备忘(8月3日—8月9日)...
- Python自动化软件测试,解放我们的双手
- 《数字图像处理》学习总结及感悟:第二章数字图像基础(1)人眼结构、感知和错觉
- 训练深度学习网络时候,出现Nan是什么原因,怎么才能避免?(转)
- 语义分割 - SegNet / DeconvNet