前端必读 0基础学习 一文看懂 Vue3 对比 Vue2 发生哪些变化
望本篇文章能帮你加深对 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 还提供了较为完美的逻辑复用性方案,举个
前端必读 0基础学习 一文看懂 Vue3 对比 Vue2 发生哪些变化相关推荐
- 【Python基础】一文看懂 Pandas 中的透视表
作者:来源于读者投稿 出品:Python数据之道 一文看懂 Pandas 中的透视表 透视表在一种功能很强大的图表,用户可以从中读取到很多的信息.利用excel可以生成简单的透视表.本文中讲解的是如何 ...
- AI基础:一文看懂BERT
0.导语 自google在2018年10月底公布BERT在11项nlp任务中的卓越表现后,BERT(Bidirectional Encoder Representation from Transfor ...
- vue 3.0和2.0区别_一文看懂 Vue.js 3.0 的优化
Vue.js 从 1.x 到 2.0 版本,最大的升级就是引入了虚拟 DOM 的概念,它为后续做服务端渲染以及跨端框架 Weex 提供了基础. Vue.js 2.x 发展了很久,现在周边的生态设施都已 ...
- 前端笔记(03)——一文看懂flex布局
文章目录 前言 一.flex基本介绍. 二.父容器属性介绍 1.父容器属性概述 2.flex-direction属性 3.flew-wrap属性 4.flex-flow复合写法 5.justify-c ...
- 0基础:教你看懂HTML5
2019独角兽企业重金招聘Python工程师标准>>> 版权声明:本文为北京爱创课堂原创文章,未经允许不得转载. 如果你对C语言.网站制作等技术没有什么了解,你可以查看这篇文章.无论 ...
- 一文看懂深度学习——人工智能系列学习笔记
深度学习有很好的表现,引领了第三次人工智能的浪潮.目前大部分表现优异的应用都用到了深度学习,大红大紫的 AlphaGo 就使用到了深度学习. 本文将详细的给大家介绍深度学习的基本概念.优缺点和主流的几 ...
- 全景丨0基础学习VR全景制作,平台篇第13章:热点功能-总览介绍
全景丨0基础学习VR全景制作,平台篇第13章:热点功能-总览介绍 大家好,欢迎观看蛙色VR官方--后台使用系列课程! 一.热点功能概览 热点,指在全景作品中添加各种类型图标的按钮,引导用户通过按钮产生 ...
- 一文看懂深度学习(白话解释+8个优缺点+4个典型算法)
本文首发自 easyAI - 人工智能知识库 原文地址:<一文看懂深度学习(白话解释+8个优缺点+4个典型算法)> 深度学习有很好的表现,引领了第三次人工智能的浪潮.目前大部分表现优异的应 ...
- Python-Excel 零基础学习xlwings,看这篇文章就够了
零基础学习xlwings,看这篇文章就够了 | 一起大数据-技术文章心得 (17bigdata.com) 1.xlwings是什么 2.xlwings安装更新与卸载 3.xlwings详细使用 4.案 ...
最新文章
- Spring Cloud 注册中心在tomcat中部署
- error: xxxx.o: Relocations in generic ELF (EM: 3)解决办法
- 方案 mysql 优点_mysql高可用方案分析
- https://www.unimelb.edu.au/
- 论营销的重要性:以一个磁铁为例
- 2019ICPC(徐州) - Colorful String(哈希+二分+动态规划/回文自动机)
- mysql双节点安装_快速安装及配置MySQL Replication双主节点集群--及改变数据保存目录...
- q7goodies事例_Java 8 Friday Goodies:精益并发
- int转换为cstring_PostgreSQL 隐式类型转换探秘
- 如何将数据仓库从 AWS Redshift 迁移到阿里云 AnalyticDB for PostgreSQL
- 分割字符串,字符串去除空格
- python协程学习
- android设备调用usb外置摄像头方法及案例
- 阿里云云计算 45 阿里云云上安全
- 完全背包告诉你 2020 代表什么
- python全套学习资料_20小时学会python的心路历程,附全套学习资料和视频教程
- 华为S5700_交换机_基础管理配置
- 小白记录问题(2)——关于np.savez()与np.laod()储存与读取字典数据的问题
- 利用python进行股票分析(五)通过tushare读取股票数据
- 【RFC6582 TCP快速恢复算法的NewReno修改】(翻译)