vue2和vue3的区别?
vue2和vue3的主要区别在于以下几点:
1、生命周期函数钩子不同
2、数据双向绑定原理不同
3、定义变量和方法不同
4、指令和插槽的使用不同
5、API类型不同
6、是否支持碎片
7、父子组件之间传值方式不同
8、main.js文件中部分设置不同
下面详细说明具体有哪些不同?
一、生命周期函数钩子不同
vue2 | vue3 |
beforeCreate 组件创建之前 created 组件创建之后 beforeMount 组件挂载到页面之前执行 mounted 组件挂载到页面之后执行 beforeUpdate 组件更新之前 updated 组件更新之后 |
setup 开始创建组件 onBeforeMount 组件挂载到页面之前执行 onMounted 组件挂载到页面之后执行 onBeforeUpdate 组件更新之前 onUpdated 组件更新之后 |
注意:vue3.x生命周期在调用前 需要先引入。除上述的钩子函数外,还增加了onRenderTracked和onRenderTriggered。
vue2和vue3的区别?的更多相关文章
- vue2与vue3的区别
template <template> <div class="wrap"> <div>{{ num }}</div> <Bu ...
- vue2和vue3的区别
一.常用命令 vue -V 查看本地 vue 版本 二.官方文档 3.0:https://cli.vuejs.org/zh/ 三.创建文件 3.0:vue create 进入工程文件夹,创建项目. 2 ...
- vue2和vue3生命周期的区别
概念 首先,我们了解一下"生命周期"这个词.通俗的来说,生命周期就是一个事务从出生到消失的过程.例如,一个人从出生到去世.在vue中,vue的生命周期是指,从创建vue对象到销毁v ...
- Vue2和Vue3技术整理1 - 入门篇 - 更新完毕
Vue2 0.前言 首先说明:要直接上手简单得很,看官网熟悉大概有哪些东西.怎么用的,然后简单练一下就可以做出程序来了,最多两天,无论Vue2还是Vue3,就都完全可以了,Vue3就是比Vue2多了一 ...
- vue2升级vue3:vue2 vue-i18n 升级到vue3搭配VueI18n v9
项目从vue2 升级vue3,VueI18n需要做适当的调整.主要是Vue I18n v8.x 到Vue I18n v9 or later 的变化,其中初始化: 具体可以参看:https://vue- ...
- vue2升级vue3指南(二)—— 语法warning&error篇
本文总结了vue2升级vue3可能会遇到的语法警告和错误,如果想知道怎样升级,可以查看我的上一篇文章:vue2升级vue3指南(一)-- 环境准备和构建篇 Warning 1.deep /deep/和 ...
- vue2升级vue3:Vue Demij打通vue2与vue3壁垒,构建通用组件
如果你的vue2代码之前是使用vue-class-component 类组件模式写的.选择可以使用 https://github.com/facing-dev/vue-facing-decorator ...
- 盘点Vue2和Vue3的10种组件通信方式(值得收藏)
Vue中组件通信方式有很多,其中Vue2和Vue3实现起来也会有很多差异:本文将通过选项式API 组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式.其中将要实现的通信 ...
- vue2与vue3实现响应式的原理区别和提升
区别: vue2.x: 实现原理: 对象类型:Object.defineProperty()对属性的读取,修改进行拦截(数据劫持): 数组类型:通过重写更新数组的一系列方法来进行拦截(对数组的变更方法 ...
随机推荐
- Canal-监听数据库表的变化
1. 简介 Canal是阿里巴巴旗下的一款开源项目,纯Java开发.基于数据库增量日志解析,提供增量数据订阅&消费功能. 工作原理 Mysql主备复制原理 MySQL master 将数据变更 ...
- 使用PowerShell安装MySQL
更新记录 2022年4月16日:本文迁移自Panda666原博客,原发布时间:2021年7月10日. 2022年4月16日:更新MySQL下载链接. 一.说明与准备工作 根据MySQL官网提供的安装M ...
- webpack中文api
1. 简介 1.Plugins://插件 webpack has a rich plugin interface.Most of the features are internal plug ...
- linux系统健康检查脚本
#!/bin/bash echo "You are logged in as `whoami`"; if [ `whoami` != root ]; then echo " ...
- Windows启动谷歌浏览器Chrome失败(应用程序无法启动,因为应用程序的并行配置不正确)解决方法
目录 一.系统环境 二.问题描述 三.解决方法 一.系统环境 Windows版本 系统类型 浏览器Chrome版本 Windows 10 专业版 64 位操作系统, 基于 x64 的处理器 版本 10 ...
- CesiumJS 2022^ 源码解读[6] - 三维模型(ModelExperimental)新架构
目录 1. ModelExperimental 的缓存机制 1.1. 缓存池 ResourceCache 1.2. 缓存对象的键设计 ResourceCacheKey 2. 三维模型的加载与解析 2. ...
- JavaScript知识梳理
JS内功修炼 专业术语 类,封装,继承, 专业术语 babel 块级作用域 函数 扩展对象的功能性 解构 set和map js的类 改进的数组功能 Promise与异步编程 代理和反射 用模块封装代码 ...
- Eclipse Ctrl+鼠标左键不能查看源代码
查询当前项目的使用的java包版本. 找到java包相应版本的安装路径. 在 "Source Attachment"对话框下,选择"External location&q ...
- 04 MySQL_数据相关的SQL
字符编码问题: 如果使用Windows电脑SQL语句中写中文报错的话,通过以下指令解决 set names gbk; 判空NULL问题: 判值用=,判空用is xxx = 非空值; xxx is nu ...
- NOI / 2.1基本算法之枚举-8760:Cantor表
总时间限制: 1000ms 内存限制: 65536kB 描述 现代数学的著名证明之一是Georg Cantor证明了有理数是可枚举的.他是用下面这一张表来证明这一命题的: 我们以Z字形给上表的每一项编 ...