vue2和vue3的区别

原文地址:https://www.cnblogs.com/limou956259/p/17195546.html

1、双向数据绑定原理不同

  • vue2:vue2的双向数据绑定是利用ES5的一个API:Object.definePropert() 对数据进行劫持,结合发布订阅模式的方式来实现的。
  • vue3:vue3中使用了ES6的Proxy API对数据代理。相比vue2.x,使用proxy的优势如下:
  • defineProperty只能监听某个属性,不能对全对象监听
  • 可以省去for in,闭包等内容来提升效率(直接绑定整个对象即可)
  • 可以监听数组,不用再去单独的对数组做特异性操作vue3.x可以检测到数组内部数据的变化。

2、是否支持碎片

  • vue2:vue2不支持碎片。
  • vue3:vue3支持碎片(Fragments),就是说可以拥有多个根节点。

3、API类型不同

  • vue2:vue2使用选项类型api,选项型api在代码里分割了不同的属性:data,computed,methods等。
  • vue3:vue3使用组合式api,新的合成型api能让我们使用方法来分割,相比于旧的api使用属性来分组,这样代码会更加简便和整洁。

4、定义数据变量和方法不同

  • vue2:vue2是把数据放入data中,在vue2中定义数据变量是data(){},创建的方法要在methods:{}中。
  • vue3:,vue3就需要使用一个新的setup()方法,此方法在组件初始化构造的时候触发。使用以下三个步骤来建立反应性数据:
  • 从vue引入reactive;
  • 使用reactive() 方法来声明数据为响应性数据;
  • 使用setup()方法来返回我们的响应性数据,从而template可以获取这些响应性数据。

5、生命周期钩子函数不同

 vue2中的生命周期:

  •   beforeCreate 组件创建之前
  •   created 组件创建之后
  •   beforeMount 组价挂载到页面之前执行
  •   mounted 组件挂载到页面之后执行
  •   beforeUpdate 组件更新之前
  •   updated 组件更新之后

vue3:vue3中的生命周期:

  setup 开始创建组件前

  •   onBeforeMount 组价挂载到页面之前执行
  •   onMounted 组件挂载到页面之后执行
  •   onBeforeUpdate 组件更新之前
  •   onUpdated 组件更新之后

而且vue3.x 生命周期在调用前需要先进行引入。除了这些钩子函数外,vue3.x还增加了onRenderTracked 和onRenderTriggered函数。

6、父子传参不同

  •   vue2:父传子,用props,子传父用事件 Emitting Events。在vue2中,会调用this$emit然后传入事件名和对象。
  •   vue3:父传子,用props,子传父用事件 Emitting Events。在vue3中的setup()中的第二个参数content对象中就有emit,那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

7、指令与插槽不同

  •   vue2:vue2中使用slot可以直接使用slot;v-for与v-if在vue2中优先级高的是v-for指令,而且不建议一起使用。
  •   vue3:vue3中必须使用v-slot的形式;vue3中v-for与v-if,只会把当前v-if当做v-for中的一个判断语句,不会相互冲突;vue3中移除keyCode作为v-on的修饰符,当然也不支持config.keyCodes;vue3中移除v-on.native修饰符;vue3中移除过滤器filter。

8、main.js文件不同

  •   vue2:vue2中我们可以使用pototype(原型)的形式去进行操作,引入的是构造函数。
  •   vue3:vue3中需要使用结构的形式进行操作,引入的是工厂函数;vue3中app组件中可以没有根标签。

关键词:

  组合式api;proxy;支持碎片;组合式api;composition;生命周期;

二、vue3新增的响应式相关的函数

  ref,reactive,readonly,computed,watch,watchEffect

关键词:

  ref,reactive,readonly,computed,watch,watchEffect

三、ref的理解:

  1)、功能:接受一个内部值,返回一个响应式的、可更改的 ref 对象,ref对象只有一个属性:value。

  2)、使用ref对象:模板上不需要写 .value 属性(会自动解构),在js中,使用 .value 来完成数据的读写。

  3)、ref接收基本类型和引用类型

  ref可以接收基本类型。

  ref也可以接收引用类型:如果将一个对象传给 ref函数,那么这个对象将通过 reactive() 转为具有深层次响应式的对象。

关键词:

  value,响应式,

四、reactive的理解:

  1)、功能: 接受一个对象,返回一个对象的响应式代理(proxy)。返回的对象以及其中嵌套的对象都会通过 ES Proxy 包裹,因此不等于源对象,建议只使用响应式代理,避免使用原始对象。

响应式转换是“深层”的:它会影响到所有嵌套的属性。一个响应式对象也将深层地解包任何 ref 属性,同时保持响应性。

  2)、注意点:当访问到某个响应式数组或 Map 这样的原生集合类型中的 ref 元素时,不会执行 ref 的解包。

关键词:

  对象、proxy、深层、数组、Map

五、readonly

  1)、功能:接受一个对象 (不论是响应式还是普通的) 或是一个 ref,返回一个原值的只读代理。

  2)、只读代理是深层的:对任何嵌套属性的访问都将是只读的。它的 ref 解包行为与 reactive() 相同,但解包得到的值是只读的。

关键词:

  只读readonly

六、computed

功能:computed是计算属性。和选项式api中的计算属性实现的功能一样。

参数:

  可以接受一个 getter 函数,返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。

  也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。

七、watch

  功能:侦听数据的变化,和选项式api中的watch实现的功能一样,组合式api中watch功能更加强大,灵活。默认是懒侦听的,即仅在侦听源发生变化时才执行回调函数。

参数:

  第一个参数:侦听器的源,可以是以下几种:

  一个函数(返回一个值的函数)

  一个 ref

  一个响应式对象

  ...或是由以上类型的值组成的数组

  第二个参数:在(第一个参数的值)发生变化时要调用的回调函数。这个回调函数接受三个参数:新值、旧值,以及一个用于注册副作用清理的回调函数。该回调函数会在               副作用下一次重新执行前调用,可以用来清除无效的副作用,例如:等待中的异步请求。

  当侦听多个来源时,回调函数接受两个数组,分别对应来源数组中的新值和旧值。

  第三个参数:可选的, 是一个对象,支持以下这些选项:

  immediate:在侦听器创建时立即触发回调。第一次调用时旧值是 undefined。

  deep:如果源是对象,强制深度遍历,以便在深层级变更时触发回调。参考深层侦听器。

关键词:

  侦听,监听,副作用,immediate,deep,深度遍历,懒侦听

八、watchEffect

  功能: watchEffect也是监听数据,但是它会立即运行一个函数,而不是懒侦听。watchEffect的侦听(依赖)的数据:watchEffect里使用了哪个数据,哪个数据就是    watchEffect的依赖。

参数:

  第一个参数:要运行的副作用函数。这个副作用函数的参数也是一个函数,注册副作用清理的回调函数。该回调函数会在副作用下一次重新执行前调用,可以用来清除无效的副作用,例如:等待中的异步请求。(和watch的第二个参数中回调函数的第三参数一样)。

  第二个参数:可选的选项,可以用来调整副作用的刷新时机或调试副作用的依赖。因为,侦听默认是在vue组件更新前调用,如果你希望组件更新后调用,可以把第二个参数传入:{ flush: 'post' }

  返回值:用来停止该副作用的函数。

关键词:

  侦听,监听,副作用,依赖,不是懒侦听

九、watch和watchEffect的区别

  与 watchEffect() 相比,watch() 使我们可以:

  懒执行副作用:watch是懒侦听执行的;watchEffect是首次就会执行

  触发侦听器的来源:watch是明确知道由哪个依赖引起的侦听,watchEffect不明确

  可以访问所侦听状态的前一个值和当前值:watch可以,watchEffect不可以。

关键词:

  懒侦听、当前值、前一个值,新值,旧值

十、setup函数的参数

  props:接收组件的属性,

  context:上下文对象,包括 slots,attrs,emit,expose

关键词:

  slots,attrs,emits,expose

十一、setup语法糖写法如何获取setup函数的参数:

  •   setup函数的参数 setup语法糖
  •   props : defineProps
  •   context.emit : defineEmits
  •   context.expose: defineExpose
  •   context.slots: useSlots
  •   context.attrs: useAttrs

关键词:

  defineProps;defineEmits;defineExpose;useSlots;useAttrs;

十二、vue3和vue2生命周期的变化,以及compositionApi中的生命周期钩子函数

  1、Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名:

  •   beforeDestroy改名为 beforeUnmount
  •   destroyed改名为 unmounted

  2、Vue3.0也提供了 Composition API 形式的生命周期钩子,Option API形式的钩子对应关系如下:

  beforeCreate===>setup()

  created=======>setup()

  beforeMount ===>onBeforeMount

  mounted=======>onMounted

  beforeUpdate===>onBeforeUpdate

  updated =======>onUpdated

  beforeUnmount ==>onBeforeUnmount

  unmounted =====>onUnmounted

关键词:

  beforeUnmount;unmounted;onBeforeMount;onMounted;onBeforeUpdate;onUpdated;onBeforeUnmount;onUnmounted

十三、Vue3.X和vue2.X中的响应式原理分别是什么,区别是什么?

1、vue2.x的响应式

实现原理:

  对象类型:通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)。

  数组类型:通过重写更新数组的一系列方法(如:push,pop等)来实现拦截。(对数组的变更方法进行了包裹)。

存在问题:

  新增属性、删除属性, 界面不会更新。

  直接通过下标修改数组, 界面不会自动更新。

2、Vue3.0的响应式

实现原理:

  通过Proxy(代理): 拦截对象中任意属性的变化, 包括:属性值的读写、属性的添加、属性的删除等。

  通过Reflect(反射): 对源对象的属性进行操作。

十四、vue3响应式数据的判断

  •   isRef: 检查一个值是否为一个 ref 对象
  •   isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
  •   isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
  •   isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

关键词:

  isRef;isReactive;isReadonly;isProxy;

十五、reactive与ref的区别:

定义数据角度:

  •   ref用来定义:基本类型数据。
  •   reactive用来定义:对象(或数组)类型数据。
  •   备注:ref也可以用来定义对象(或数组)类型数据, 它内部会自动通过reactive转为代理对象。
  •   原理角度:
  •   ref通过Object.defineProperty()的get与set来实现响应式(数据劫持)。
  •   reactive通过使用Proxy来实现响应式(数据劫持), 并通过Reflect操作源对象内部的数据。
  •   使用角度:
  •   ref定义的数据:操作数据需要.value,读取数据时模板中直接读取不需要.value。
  •   reactive定义的数据:操作数据与读取数据:均不需要.value。

关键词:

  ref;reactive;Proxy;value;

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

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

相关文章

木棒切割问题

题目很简单&#xff0c;就是我们在写二分的时候&#xff0c;会遇到这样的情况&#xff1a; mid left (right-left)/2; if (nums k)return mid;if (nums>k)left mid;if (nums<k)right mid-1; 若我们debug会发现其可能会一致卡在left mid&#xff0c;例如&#xff08…

框架分析(9)-Hibernate

框架分析&#xff08;9&#xff09;-Hibernate 专栏介绍Hibernate特性对象关系映射&#xff08;ORM&#xff09;数据库连接和事务管理查询语言&#xff08;HQL&#xff09;缓存机制透明的持久化操作对象的延迟加载事务管理 优缺点优点简化数据库操作跨数据库平台高度可定制性缓…

C#通过ModbusTcp协议读写西门子PLC中的浮点数

一、Modbus TCP通信概述 MODBUS/TCP是简单的、中立厂商的用于管理和控制自动化设备的MODBUS系列通讯协议的派生产品&#xff0c;显而易见&#xff0c;它覆盖了使用TCP/IP协议的“Intranet”和“Internet”环境中MODBUS报文的用途。协议的最通用用途是为诸如PLC&#xff0c;I/…

变形记---抽象接口,屎山烂代码如何改造成优质漂亮的代码

在游戏服务器开发过程中,我们经常会在动手码代码之前好好的设计一番,如何设计类,如何设计接口,如何调用,有没有什么隐患,在这些问题考虑评审可以Cover现阶段的需求的情况下再动手。 不过,对于一些初级,甚至中高级开发者,仍然不可避免的进入了一个死胡同,缺少设计,屎…

PCL RANSAC分割提取多个空间圆

目录 一、概述二、代码实现三、结果展示1、原始数据2、提取结果四、测试数据本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、概述 使用PCL分割提取多个空间圆,其核心原理仍然是RANSAC拟合空间圆,这里只是做简单修改…

时序预测 | MATLAB实现EEMD-SSA-LSTM、EEMD-LSTM、SSA-LSTM、LSTM时间序列预测对比

时序预测 | MATLAB实现EEMD-SSA-LSTM、EEMD-LSTM、SSA-LSTM、LSTM时间序列预测对比 目录 时序预测 | MATLAB实现EEMD-SSA-LSTM、EEMD-LSTM、SSA-LSTM、LSTM时间序列预测对比预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 时序预测 | MATLAB实现EEMD-SSA-LSTM、E…

uniapp制作——交友盲盒

在小程序端可以有很多好玩的小玩意&#xff0c;目前网上比较有趣的就是有一个交友盲盒&#xff0c;能抽出和找出对象的一个有趣的小程序&#xff0c;所以今天给大家带来用uniapp搭建的交友盲盒&#xff0c;大家再根据自己的情况去搭建自己的后端和数据库来完成自己的一个小项目…

FPGA实现电机转速PID控制

通过纯RTL实现电机转速PID控制&#xff0c;包括电机编码器值读取&#xff0c;电机速度、正反转控制&#xff0c;PID算法&#xff0c;卡尔曼滤波&#xff0c;最终实现对电机速度进行控制&#xff0c;使其能够渐近设定的编码器目标值。 一、设计思路 前面通过SOPC之NIOS Ⅱ实现电…

算法笔记:点四叉树

点四叉树是一种用于主要是针对空间点存储与索引的树形数据结构在点四叉树中&#xff0c;空间被分割成四个矩形&#xff0c;四个不同的多边形对应于SW、NW、SE、NE四个象限 1 基本操作 1.1 初始化 创建一个根节点&#xff0c;该节点代表整个二维空间区域 1.2 插入点 当一个新…

oracle 自定义存储过程(非常简单明了)

语法说明 CREATE OR REPLACE PROCEDURE 存储过程名字 ( 参数1 IN %TYPE, 参数2 IN %TYPE, 参数3 OUT %TYPE) IS 变量1 %TYPE; 变量2 %TYPE; BEGIN存储过程执行语句块 END 存储过程名字;举例说明 1.举一个简单的例子 定义存储过程 easyProcedure 入参为 两个数 出参为 他们的…

自己公司开发的ERP系统,怎么对接京东,淘宝等这些电商平台?

得益于互联网基建的成熟及快速发展的电子商贸经济&#xff0c;我国线上零售市场快速增长&#xff0c;2022年全国线上零售额达到13.79万亿元&#xff0c;占社会消费品零售总额的比重为27.2%&#xff0c;也就是说每卖出三件零售商品&#xff0c;就有一件是从线上销售。中大型零售…

P1116 车厢重组(冒泡排序)

题目描述 在一个旧式的火车站旁边有一座桥&#xff0c;其桥面可以绕河中心的桥墩水平旋转。一个车站的职工发现桥的长度最多能容纳两节车厢&#xff0c;如果将桥旋转 180 180 180 度&#xff0c;则可以把相邻两节车厢的位置交换&#xff0c;用这种方法可以重新排列车厢的顺序…

手撸任意层神经网络-读从文本s.txt取网络结构初始化neuralNetwork

现代c++读取文本文件,文本文件:"s.txt"中有字符串,如:"{2,4,3,1}",获取数字如:2,4,3,1赋值给变量 vectov<int>La; #include <iostream> #include <vector> #include <fstream> //#include <sstream> #include <random&…

【GPT,Flask】用Python Flask结合OpenAI的GPT API构建一个可自主搭建的内容生成应用网站

【背景】 自己构建模型并进行训练需要很高的知识,技能和资源门槛。如今,通过OpenAI提供的API,则可以快速通过GPT能力构建可以提供内容生成服务的在线网站。这套框架可以提供给用户,用户可以利用该框架在自己的环境(比如自己的公司内)构建内容生成服务。你也可以自己上线…

mac建议装双系统吗,详细分析苹果电脑双系统的利弊

mac建议装双系统吗&#xff0c;Mac电脑上安装双系统有哪些利弊呢&#xff0c;一起来看看吧&#xff01; 苹果Mac电脑安装双系统利&#xff1a; 1、用来办公更加方便&#xff1a;苹果系统功能也是很强大的&#xff0c;但是用来办公非常不方便&#xff0c;是由于一些常用的exe软…

QTableView合并单元格

QtableView的功能 QTableView是Qt框架提供的用于显示表格数据的类。它是基于MVC&#xff08;模型-视图-控制器&#xff09;设计模式的一部分&#xff0c;用于将数据模型和界面视图分离。 以下是一些QTableView的主要特点和功能&#xff1a; 1. 显示表格数据&#xff1a; QTa…

奥本海默

&#xff08;1&#xff09;命 电影一开头&#xff0c;奥本海默不擅长做实验。但你看宿命凑巧不凑巧&#xff0c;奥本海默成了曼哈顿计划的工程负责人&#xff0c;偏偏要他一次性爆炸成功。 电影一开头&#xff0c;奥本海默因为不擅长做实验被导师指出引起其他同学哄堂大笑&…

无涯教程-JavaScript - DATE函数

描述 DATE函数返回特定日期的序列号。 语法 DATE (year, month, day)争论 Argument描述Required/Optionalyear year参数的值可以包含1-4位数字。 Excel会根据计算机使用的日期系统解释年份参数。 默认情况下,Microsoft Excel for Windows使用1900日期系统。 请参阅下面的注…

vue如何获取组件的动态长宽 useResizeObserver用法

工作中遇到了一个需求&#xff0c;tab个数要根据页面的大小动态变化&#xff0c;研究了下&#xff0c;分享下&#xff1a; import { useResizeObserver } from vueuse/core;const tabRef ref();const getData (el) > {if (!el || !el?.length) return;console.log(el[0]…

分类算法系列②:KNN算法

目录 KNN算法 1、简介 2、原理分析 数学原理 相关公式及其过程分析 距离度量 k值选择 分类决策规则 3、API 4、⭐案例实践 4.1、分析 4.2、代码 5、K-近邻算法总结 &#x1f343;作者介绍&#xff1a;准大三网络工程专业在读&#xff0c;努力学习Java&#xff0c;涉…