vue2 和 vue3的区别

1.生命周期不一样

vue2

vue3

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • Destroy
  • onBeforeMount()
  • onMounted()
  • onBeforeUpdate()
  • onUpdated()
  • onBeforeUnmount()
  • onUnmounted()

2.Composition组合式api

  • Vue2是选项API(Options API),一个逻辑会散乱在文件不同位置(data、props、computed、watch、生命周期钩子等),导致代码的可读性变差。当需要修改某个逻辑时,需要上下来回跳转文件位置。
  • Vue3组合式API(Composition API)则很好地解决了这个问题,可将同一逻辑的内容写到一起,增强了代码的可读性、内聚性,其还提供了较为完美的逻辑复用性方案。所有逻辑在setup函数中,使用 ref、watch 等函数组织代码。

3.vue2和vue3双向数据绑定原理发生了改变

vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。

vue3 中使用了 es6 的 ProxyAPI 对数据代理。

4.根节点

  • Vue3 支持碎片(Fragments),就是说在组件可以拥有多个根节点。
  • vue2 只能存在一个根节点,需要用一个div来包裹

5.建立数据 data / setup函数

  • Vue2 这里把数据放入data属性中
  • Vue3 setup函数声明,返回模板需要数据与函数。

6.性能和速度

Vue 3‌:重新编写了虚拟DOM的实现,优化了编译模板,组件初始化和更新性能提高了1.3到2倍,服务器端渲染(SSR)速度提高了2到3倍。此外,Vue 3支持树摇(Tree Shaking),可以只打包需要的模块,减小包大小‌。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/467600.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

leetcode 832.翻转图像

1.题目要求: 2.题目代码: class Solution { public://水平反转函数void replace_photo(vector<int>& array){for(int i 0;i < array.size();i){if(array[i] 1){array[i] 0;}else{array[i] 1;}}}vector<vector<int>> flipAndInvertImage(vector&…

CST案例分析:TLM算法仿真5G毫米波手机天线和整机

5G时代&#xff0c;产品复杂&#xff0c;更新换代快&#xff0c;如何快速仿真不同的设计版本是影响研发效率的关键问题。本期我们用达索系统SIMULIA自己的手机模型来演示5G毫米波的仿真。 &#xff08;图片仅为概念演示&#xff0c;未经达索系统授权不得使用&#xff09; 完整的…

W55RP20-EVB-Pico评估板介绍

目录 1 简介 2 硬件资源 2.1 硬件规格 2.2 引脚定义 2.3 工作条件 3 参考资料 3.1 RP2040 数据手册 3.2 原理图 ​编辑 原理图 & 物料清单 & Gerber 文件 3.3 尺寸图&#xff08;单位&#xff1a;mm&#xff09; ​编辑 3.4 认证 3.5 参考例程 4 硬件协…

【重装系统后重新配置2】pycharm 终端无法激活conda环境

pycharm 终端无法激活 conda 环境&#xff0c;但是 Windows本地终端是可以激活的 原因是pycharm 默认的终端是 Windows PowerShell 解决方法有两个&#xff1a; 一、在设置里&#xff0c;修改为cmd 二、下面直接选择

【51单片机】UART串口通信原理 + 使用

学习使用的开发板&#xff1a;STC89C52RC/LE52RC 编程软件&#xff1a;Keil5 烧录软件&#xff1a;stc-isp 开发板实图&#xff1a; 文章目录 串口硬件电路UART串口相关寄存器 编码单片机通过串口发送数据电脑通过串口发送数据控制LED灯 串口 串口是一种应用十分广泛的通讯接…

关于word 页眉页脚的一些小问题

去掉页眉底纹&#xff1a; 对文档的段落边框和底纹进行设置&#xff0c;也是页眉横线怎么删除的一种解决方式&#xff0c;具体操作如下&#xff1a; 选中页眉中的横线文本&#xff1b; 点击【开始】选项卡&#xff0c;在【段落】组中点击【边框】按钮的下拉箭头&#xff1b; …

SQL Servers审核提高数据库安全性

什么是SQL Server审核&#xff1f; SQL Server审核包括追踪和审查发生在SQL Server上的所有活动&#xff0c;检测潜在的威胁和漏洞&#xff0c;能够监控和记录对服务器设置的每次更改。此外&#xff0c;可以帮助管理员可以轻松地追踪数据库中特定表中的所有服务器活动&#xf…

Linux进程通信之共享内存

进程通信之共享内存 各个进程的虚拟内存是通过页表映射到物理内存中&#xff0c;而共享内存的实现就是允许两个不相关的进程映射到同一块物理内存&#xff0c;通过对该内存的读写数据以达到进程通信的目的。 共享内存是IPC进程通信方法中传输速度最快的方法&#xff0c;双方进…

解锁 AI 新境界:元素碰撞的神奇应用技巧全解析

前言 在当今科技飞速发展的时代&#xff0c;ChatGPT 作为一款强大的人工智能工具&#xff0c;为我们开启了全新的创意探索之门。当我们让 ChatGPT 去进行大量的元素碰撞时&#xff0c;相较于传统人力的联想方式&#xff0c;它能够凭借其强大的算法和海量的数据处理能力&#x…

MFC图形函数学习06——画椭圆弧线函数

绘制椭圆弧线函数是MFC基本绘图函数&#xff0c;这个函数需要的参数比较多&#xff0c;共四对坐标点。前两对坐标点确定椭圆的位置与大小&#xff0c;后两对坐标确定椭圆弧线的起点与终点。 一、绘制椭圆弧线函数 原型&#xff1a;BOOL Arc(int x1,int y1,int x2,int y2…

【C++】异常处理机制(对运行时错误的处理)

&#x1f308; 个人主页&#xff1a;谁在夜里看海. &#x1f525; 个人专栏&#xff1a;《C系列》《Linux系列》 ⛰️ 天高地阔&#xff0c;欲往观之。 目录 引言 1.编译器可以处理的错误 2.编译器不能处理的错误 3.传统的错误处理机制 assert终止程序 返回错误码 一、…

SQLI LABS | Less-35 GET-Bypass Add Slashes (we dont need them) Integer Based

关注这个靶场的其它相关笔记&#xff1a;SQLI LABS —— 靶场笔记合集-CSDN博客 0x01&#xff1a;过关流程 输入下面的链接进入靶场&#xff08;如果你的地址和我不一样&#xff0c;按照你本地的环境来&#xff09;&#xff1a; http://localhost/sqli-labs/Less-35/ 话不多说…

【Qwen2技术报告分析】解读模型架构 pre/post数据构建和模型评估

目录 前言 一、Tokenizer 二、模型结构 dense模型 MoE模型 模型参数设置 三、Pre-Training Pre-Training DATA LONG-CONTEXT TRAINING 四、Post-Training Post-Training DATA 人工数据注释&#xff08;collaborative data annotation&#xff09; 自动数据合成&a…

【HarmonyOS】not supported when useNormalizedOHMUrl is not true.

【HarmonyOS】 not supported when useNormalizedOHMUrl is not true. 问题背景&#xff1a; 集成三方库编译时&#xff0c;IDE提示报错信息如下&#xff1a; hvigor ERROR: Bytecode HARs: [cashier_alipay/cashiersdk] not supported when useNormalizedOHMUrl is not true…

pdb和gdb的双剑合璧,在python中调试c代码

左手编程&#xff0c;右手年华。大家好&#xff0c;我是一点&#xff0c;关注我&#xff0c;带你走入编程的世界。 公众号&#xff1a;一点sir&#xff0c;关注领取python编程资料 问题背景 正常情况下&#xff0c;调试python代码用pdb&#xff0c;调试c代码用gdb&#xff0c;…

基于MPPT最大功率跟踪的光伏发电蓄电池控制系统simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 基于MPPT最大功率跟踪的光伏发电蓄电池控制系统simulink建模与仿真。本系统包括PV模块&#xff0c;电池模块&#xff0c;电池控制器模块&#xff0c;MPPT模块&#xff0c;PWM模…

uni-app打包后报错云服务空间未关联

使用uni-app打包到h5 项目里面用到了uni-app的云端一体城市选择组件&#xff0c;这个组件数据用到了uniCloud云服务空间&#xff0c;在本地运行没问题&#xff0c;打包之后测试环境报错&#xff1a; 一顿查&#xff0c;查到了官网是这样说的&#xff1a; cli publish --platfo…

vue用jenkins 打包项目项目关闭eslint检查

问题描述&#xff1a;创建vue脚手架项目后&#xff0c;使用jenkins 打包项目&#xff0c;出现如下图所示错误&#xff0c;显示错误来源于eslint检测。 解决方法&#xff1a;在根目录下找到vue.config.js文件&#xff0c;添加lintOnSave: false以关闭eslint检测&#xff0c;项目…

基于Spring Boot的美术馆管理系统的设计与实现,LW+源码+讲解

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统美术馆管理系统信息管理难度大&#xff0c;容错率低&…

战略共赢 软硬兼备|云途半导体与知从科技达成战略合作

2024年11月5日&#xff0c;江苏云途半导体有限公司&#xff08;以下简称“云途”或“云途半导体”&#xff09;与上海知从科技有限公司&#xff08;以下简称“知从科技”&#xff09;达成战略合作&#xff0c;共同推动智能汽车领域高端汽车电子应用的开发。 云途半导体与知从科…