vue2和vue3的区别详解

devtools/2024/11/14 22:38:17/

vue2 VS vue3

对比vue2vue3
配置脚手架cmd命令行可视化方式创建脚⼿架
组件通信props、$emit、provide、$arrts、EventBus等props、$emit、provide、inject、arrts等
数据监听watch,computedwatch,watchEffect,computed
双向绑定Object.definePropertyProxyAPI
⽣命周期四个阶段beforeCreatecreated—>setup
api选项式Options API组合式Composition API

双向数据绑定原理

vue2 的双向数据绑定是通过ES5的⼀个API,Object.defineProperty()对数据进⾏劫持,结合发布订阅模式的⽅式来实现的,也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;

其核心是 Object.defineProperty()方法,给Vue中的数据绑定get和set方法,当获取数据的时候,调用get方法,修改data中的数据的时候调用set方法,通过watcher监听器去更新视图,完成数据的双向绑定。

vue3 中使⽤了ES6的ProxyAPI对数据代理,通过 reactive() 函数给每⼀个对象都包⼀层 Proxy,通过 Proxy 监听属性的变化,从⽽实现对数据的监控。

相对于Object.definePropery()有以几个优点:1.Proxy直接代理整个对象而非对象属性,这样只需要做一层代理就可以监听同级结构下的所有属性变化, 包括新增属性和删除属性。 2.Proxy可以监听数组的变化。

生命周期对比

vue2生命周期vue3生命周期描述
beforeCreate()已去掉setup代替

创建阶段

Created()已去掉setup代替
beforeMount()onBeforeMount

挂载阶段

mounted()onMounted
beforeUpdateonBeforeUpdate更新阶段
updated onUpdated
beforeDestroyonBeforeUnmount

销毁阶段

destrovedonUnmounted

建立数据发生了变化

        vue2把数据放在data中,vue3把数据放在setup中。

是否支持碎片化

        vue2.0只允许有一个根标签,vue3.0支持碎片化,可以拥有多个根节点。

Vue2
<template><div><header></header><main></main><footer></footer></div>
</template>
Vue3
<template><header></header><main></main><footer></footer>
</template>

组件通信

  • props通信
    • vu3 父传子                  
    • vue2父传子
      1.定义数据 
      data(){return{goodsList:[{id:1,name:'方便面',price:2.5,info:'好吃不贵'},{id:2,name:'火腿肠',price:2,info:'价钱合理'},{id:3,name:'鹌鹑蛋',price:4.5,info:'物美价廉'},]}},2.放到模板的子组件中
      <MyTest :item="goodsList[1]"></MyTest>3.子组件props接收export default {//接收数据props:['item']}

    • vue3子传父


http://www.ppmy.cn/devtools/134013.html

相关文章

学习笔记——PLCT汪辰:开发RISC-V上的操作系统(持续更新)

目录 第0章 下载源码 运行环境 构建和使用说明 第1章 记录一个本人没听说过的架构 第2章~第4章 第0章 下载源码 git clone https://gitee.com/unicornx/riscv-operating-system-mooc.git 运行环境 推荐使用 Ubuntu 20.04&#xff0c;Ubuntu 20.04 是目前最新的 Ubun…

element-ui】使用el_upload上传文件无法动态修改action

问题&#xff1a;最近在使用el_upload上传文件时&#xff0c;发现无法动态修改action的值&#xff0c;进行提交时&#xff0c;caseId2还是默认值null 原因&#xff1a;el-upload的先执行上传&#xff0c;后执行action里的响应&#xff0c;也就是赋值等操作。 解决方法&#x…

LeetCode【0059】螺旋矩阵II

本文目录 1 中文题目2 求解方法&#xff1a;数理逻辑2.1 方法思路2.2 Python代码2.3 复杂度分析 3 题目总结 1 中文题目 给定一个正整数 n n n &#xff0c;生成一个包含 1 1 1 到 n 2 n^2 n2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的 n x n n x n nxn 正方形矩…

汇编分析C++class

文章目录 this指针不神奇静态成员方法构造函数拷贝构造和移动构造运算符重载拷贝赋值和移动赋值多态机制虚函数虚表对象怎么获取虚表构造函数禁止为虚函数继承体系中析构函数必为虚函数模板对CPU不可见malloc和newfree和delete请配对new和deletefree如何确定释放空间的大小this…

IntelliJ+SpringBoot项目实战(八)--在控制层API中封装响应数据包

在控制层类的接口中一般需要返回响应结果的数据包&#xff0c;如果采用接口返回类型设置为JSONObject,比如 public JSONObject getUserList...){ JSONObject json new JSONObject(); } 通过使用json.put("","")的方式手工设置返回值会比较繁琐&#xf…

图形 2.6 伽马校正

伽马校正 B站视频&#xff1a;图形 2.6 伽马校正 文章目录 伽马校正颜色空间传递函数 Gamma校正校正过程为什么需要校正&#xff1f;CRT与转换函数 为什么sRGB在Gamma 0.45空间&#xff1f; 人对亮度的敏感韦伯定律中灰值 线性工作流不在线性空间下进行渲染的问题统一到线性空…

数据库SQL——连接表达式(JOIN)图解

目录 一、基本概念 二、常见类型 内连接&#xff08;INNER JOIN&#xff09;&#xff1a; 左连接&#xff08;LEFT JOIN 或 LEFT OUTER JOIN&#xff09;&#xff1a; 右连接&#xff08;RIGHT JOIN 或 RIGHT OUTER JOIN&#xff09;&#xff1a; 全连接&#xff08;FULL…

LabVIEW导入并显示CAD DXF文件图形 程序见附件

LabVIEW导入并显示CAD DXF文件图形 程序见附件 LabVIEW导入并显示CAD DXF文件图形 程序见附件 - 北京瀚文网星科技有限公司 LabVIEW广泛应用于自动化、数据采集、图形显示等领域。对于涉及CAD图形的应用&#xff0c;LabVIEW也提供了一些方法来导入和显示CAD DXF文件&#x…