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的区别?的更多相关文章

  1. vue2与vue3的区别

    template <template> <div class="wrap"> <div>{{ num }}</div> <Bu ...

  2. vue2和vue3的区别

    一.常用命令 vue -V 查看本地 vue 版本 二.官方文档 3.0:https://cli.vuejs.org/zh/ 三.创建文件 3.0:vue create 进入工程文件夹,创建项目. 2 ...

  3. vue2和vue3生命周期的区别

    概念 首先,我们了解一下"生命周期"这个词.通俗的来说,生命周期就是一个事务从出生到消失的过程.例如,一个人从出生到去世.在vue中,vue的生命周期是指,从创建vue对象到销毁v ...

  4. Vue2和Vue3技术整理1 - 入门篇 - 更新完毕

    Vue2 0.前言 首先说明:要直接上手简单得很,看官网熟悉大概有哪些东西.怎么用的,然后简单练一下就可以做出程序来了,最多两天,无论Vue2还是Vue3,就都完全可以了,Vue3就是比Vue2多了一 ...

  5. vue2升级vue3:vue2 vue-i18n 升级到vue3搭配VueI18n v9

    项目从vue2 升级vue3,VueI18n需要做适当的调整.主要是Vue I18n v8.x 到Vue I18n v9 or later 的变化,其中初始化: 具体可以参看:https://vue- ...

  6. vue2升级vue3指南(二)—— 语法warning&error篇

    本文总结了vue2升级vue3可能会遇到的语法警告和错误,如果想知道怎样升级,可以查看我的上一篇文章:vue2升级vue3指南(一)-- 环境准备和构建篇 Warning 1.deep /deep/和 ...

  7. vue2升级vue3:Vue Demij打通vue2与vue3壁垒,构建通用组件

    如果你的vue2代码之前是使用vue-class-component 类组件模式写的.选择可以使用 https://github.com/facing-dev/vue-facing-decorator ...

  8. 盘点Vue2和Vue3的10种组件通信方式(值得收藏)

    Vue中组件通信方式有很多,其中Vue2和Vue3实现起来也会有很多差异:本文将通过选项式API 组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式.其中将要实现的通信 ...

  9. vue2与vue3实现响应式的原理区别和提升

    区别: vue2.x: 实现原理: 对象类型:Object.defineProperty()对属性的读取,修改进行拦截(数据劫持): 数组类型:通过重写更新数组的一系列方法来进行拦截(对数组的变更方法 ...

随机推荐

  1. Canal-监听数据库表的变化

    1. 简介 Canal是阿里巴巴旗下的一款开源项目,纯Java开发.基于数据库增量日志解析,提供增量数据订阅&消费功能. 工作原理 Mysql主备复制原理 MySQL master 将数据变更 ...

  2. 使用PowerShell安装MySQL

    更新记录 2022年4月16日:本文迁移自Panda666原博客,原发布时间:2021年7月10日. 2022年4月16日:更新MySQL下载链接. 一.说明与准备工作 根据MySQL官网提供的安装M ...

  3. webpack中文api

    1.      简介 1.Plugins://插件 webpack has a rich plugin interface.Most of the features are internal plug ...

  4. linux系统健康检查脚本

    #!/bin/bash echo "You are logged in as `whoami`"; if [ `whoami` != root ]; then echo " ...

  5. Windows启动谷歌浏览器Chrome失败(应用程序无法启动,因为应用程序的并行配置不正确)解决方法

    目录 一.系统环境 二.问题描述 三.解决方法 一.系统环境 Windows版本 系统类型 浏览器Chrome版本 Windows 10 专业版 64 位操作系统, 基于 x64 的处理器 版本 10 ...

  6. CesiumJS 2022^ 源码解读[6] - 三维模型(ModelExperimental)新架构

    目录 1. ModelExperimental 的缓存机制 1.1. 缓存池 ResourceCache 1.2. 缓存对象的键设计 ResourceCacheKey 2. 三维模型的加载与解析 2. ...

  7. JavaScript知识梳理

    JS内功修炼 专业术语 类,封装,继承, 专业术语 babel 块级作用域 函数 扩展对象的功能性 解构 set和map js的类 改进的数组功能 Promise与异步编程 代理和反射 用模块封装代码 ...

  8. Eclipse Ctrl+鼠标左键不能查看源代码

    查询当前项目的使用的java包版本. 找到java包相应版本的安装路径. 在 "Source Attachment"对话框下,选择"External location&q ...

  9. 04 MySQL_数据相关的SQL

    字符编码问题: 如果使用Windows电脑SQL语句中写中文报错的话,通过以下指令解决 set names gbk; 判空NULL问题: 判值用=,判空用is xxx = 非空值; xxx is nu ...

  10. NOI / 2.1基本算法之枚举-8760:Cantor表

    总时间限制: 1000ms 内存限制: 65536kB 描述 现代数学的著名证明之一是Georg Cantor证明了有理数是可枚举的.他是用下面这一张表来证明这一命题的: 我们以Z字形给上表的每一项编 ...