Vue2和vue3的区别(前端面试常见问题)

1.Api的变化:vue3使用组合式Api(compostion Api)和Vue2是选项式Api(options Api)。选项式Api具有data ,watch,methods,computed,一个个的模块。如果代码过多可读性会很差。并且代码的逻辑要分别写在这几个模块中,逻辑分散。vue3组合式Api代码逻辑相同的可以写在一起,方便阅读和维护。

2.生命周期:vue3的生命周期在Vue2的基础上前面加上on。但是去掉了beforeCreate和created,使用setup代替。beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted。并且vue3的生命周期必须先引入才能使用
3.响应式:Vue2是利用object.definedProperty来对数据对象进行劫持。通过obsever对数据对象进行遍历给他们加上geter和setter方法。当数据发生改变就会触发setter方法,用compile对模板进行编译然后渲染到视图。利用watcher连接compile和observe。达到数据变化,视图更新。视图交互变化数据改变。vue3是利用es6的proxy对数据进行代理。通过proxy对数据进行包装。初始化时创建一个原始数据对象raw并利用proxy对他进行代理。到通过raw调用这个对象的属性时就会触发get函数。修改这个对象时就会触发set函数。这样无论是调用还是修改都会被检测到。实现对数据的追踪和更新。解决vue2无法通过下标修改数组的问题和无法检测到对象的属性的问题

4.Vue2只能有一个根节点。当有多个根节点的时候会报错。但vue3可以有多个根节点也就是所谓的fragement

5.vue3打包的体积更小。因为使用了treeshaking。移除了上下文未使用的代码

6.vue3对ts能有更好的支持。

7.vue3新增了teleport组件 ,使组件能够脱离他的层级限制,挂载到指定的dom节点上。

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

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

相关文章

【Linux】基于Kubernetes部署最新版AWX

目录 前言一、安装1.安装K3S2.提前导入redis、PG镜像3.安装AWX4.启动web页面5.卸载干净 二、使用1.登陆密码2.中英文切换3.查看当前版本 三、总结 前言 我们都听过Ansible,它本质上是一个进行了封装的Shell,优点在于它是去中心化的工具,可以…

android 简单快速 自定义dialog(简单好用,不需要设置样式)

1.MyDialog代码: public class MyDialog{private Activity activity;private ViewGroup contentView;private View view;public MyDialog(Activity activity) {this.activityactivity;contentView activity.findViewById(android.R.id.content);viewLayoutInflate…

RabbitMQ学习总结-消息的可靠性

保证MQ消息的可靠性,主要从三个方面:发送者确认可靠性,MQ确认可靠性,消费者确认可靠性。 1.发送者可靠性:主要依赖于发送者重试机制,发送者确认机制; 发送者重试机制,其实就是配置…

安泰高压放大器应用领域包括哪些方面

高压放大器是一种关键的电子器件,广泛应用于多个领域,以放大高电压信号,满足不同应用的需求。这些放大器能够处理高电压信号,同时保持信号质量和可靠性。下面安泰电子将为大家介绍高压放大器的各种应用领域,以便更好地…

Django 简介

Django 简介 基本介绍 Django 是一个由 Python 编写的一个开放源代码的 Web 应用框架。 Django 是一个高级的 Python Web 框架,用于快速开发可维护和可扩展的 Web 应用程序。 使用 Django,只要很少的代码,Python 的程序开发人员就可以轻松…

2014

1,写出计算Ack(m,n)的递归算法 #include<iostream> using namespace std; int A(int m,int n){if(m0){return n1;}else if(m>0&&n0){return A(m-1,1);}else{return A(m-1,A(m,n-1));} }int main(){int m,n;cout<<"please input two number"&l…

数字人基础 | 3D手部参数化模型2017-2023

楔子: 2017年年底的泰国曼谷, SIGGRAPH Asia会议上, 来自马普所的 Javier Romero, Dimitrios Tzionas(两人都是 Michael J. Black的学生)发布了事实性的手部参数化模型标准: MANO [1]。 MANO的诞生意味着 Michael J. Black团队在继人体参数化模型 SMPL后, 事实性的将能够表达人…

拓展欧几里得算法

一、拓展欧几里得算法 1.1 算法简析 根据裴蜀定理&#xff0c;对任意 a a a 和 b b b&#xff0c;一定存在 x x x 和 y y y&#xff0c;使 a x b y gcd ( a , b ) ax by \text{gcd}(a, b) axbygcd(a,b)。拓展欧几里得算法不仅能求出 a a a 和 b b b 的最大公约数&…

java实现计算ROUGE-L指标(一)

ROUGE (Recall-Oriented Understudy for Gisting Evaluation) 是用于评估自动文摘或机器翻译的一种评估方法&#xff0c;其中的ROUGE-L指标是基于最长公共子序列&#xff08;Longest Common Subsequence&#xff0c;LCS&#xff09;来计算的 我们做AI问答系统&#xff0c;需要一…

访问学者申请记|美国首所翻译博士点

N老师出国访学的目的一方面是开拓眼界&#xff0c;另一方面也是为完成翻译方向的博士论文创造更好的条件。最终我们获得美国纽约州立大学宾汉姆顿分校的邀请函&#xff0c;该校的“翻译研究和教学项目”&#xff08;TRIP&#xff09;是美国高校设立的第一个翻译博士学位项目&am…

JavaScript进阶3之参数按值传递、call,apply,bind和new的实现、继承的多种方式

JavaScript基础 参数按值传递按值传递共享传递 call、apply、bind和new的实现this软绑定硬绑定 call的实现第一步第二步第三步 apply的实现bind的实现返回函数的模拟实现传参的模拟实现构造函数效果的模拟实现构造函数效果的优化实现 new的实现初步实现 继承的多种方式&优缺…

(学习日记)2024.03.09:UCOSIII第十一节:就绪列表

写在前面&#xff1a; 由于时间的不足与学习的碎片化&#xff0c;写博客变得有些奢侈。 但是对于记录学习&#xff08;忘了以后能快速复习&#xff09;的渴望一天天变得强烈。 既然如此 不如以天为单位&#xff0c;以时间为顺序&#xff0c;仅仅将博客当做一个知识学习的目录&a…

计算机网络 —— 运输层

运输层 5.1 运输层概述 运输层的主要任务是&#xff0c;如何为运行在不同主机上的应用进程提供直接的通信服务。运输层协议又称为端到端协议。 根据应用需求的不同&#xff0c;因特网的运输层为应用层提供了两种不同的运输协议&#xff0c;即面向连接的TCP和无连接的UDP 5.2…

金融需要多样性,量化需要C++!通过本文,你可以知道:1、为什么是C++

通过本文&#xff0c;你可以知道&#xff1a; 1、为什么是C 2、Python的用武之地 3、量化C岗位薪酬水平 C VS Python 量化交易系统开发语言主要用C&#xff0c;也有人用Python。 但是从经验看&#xff0c;用C开发的量化交易系统能够让在系统中程序运行的速度更快。 量化交易…

Maya为模型添加细分数

文章目录 方法1 通道盒操作注意 方法2 添加分段操作注意 方法3 平滑操作 方法1 通道盒 操作 选中物体&#xff0c;选择通道盒/输入/点一下模型的名字/细分数&#xff0c;分别为长宽高添加细分 这相当于修改模型的底层数据&#xff0c;不会平滑模型&#xff0c;只会进行细分 …

瑞熙贝通实验室物联网管理平台新升级|支持远程开门视频监控与电源控制以及环境监测

瑞熙贝通实验室智能物联网管控平台&#xff1a;利用“互联网与物联网技术”有机融合&#xff0c;对实验室的用电安全监测、实验室环境异常监测&#xff08;颗粒物监测、明火监测、可燃气体、烟雾监测、温湿度传感器、红外人体感应&#xff09;、实验室人员安全准入、万物互联等…

什么是全局解释器锁(GIL)?它如何影响Python的多线程性能?

什么是全局解释器锁&#xff08;GIL&#xff09;&#xff1f;它如何影响Python的多线程性能&#xff1f; 全局解释器锁&#xff08;GIL&#xff0c;Global Interpreter Lock&#xff09;是计算机程序设计语言解释器用于同步线程的工具&#xff0c;确保同一时间内仅有一个线程…

爬虫案例1

通过get请求直接获取电影信息 目标页面: https://spa6.scrape.center/在network中可以看到是通过Ajax发送的请求&#xff0c;这个请求在postman中也可以直接请求成功&#xff0c;这只是一个用来练习爬虫的&#xff0c;没有达到js逆向的过程&#xff0c;需要通过分析js 代码来获…

Excel判断CD两列在EF两列的列表中是否存在

需求 需要将CD两列的ID和NAME组合起来&#xff0c;查询EF两列的ID和NAME组合起来的列表中是否存在&#xff1f; 比如&#xff0c;判断第二行的“123456ABC”在EF的第二行到第四行中是否存在&#xff0c;若存在则显示Y&#xff0c;不存在则显示N 实现的计算公式 IF(ISNUMBER…

淘宝基于Nginx二次开发的Tengine服务器

最近在群里看到这样一张阿里云网关报错的截图&#xff0c;我保存下来看了下 看到下面有 Tengine提供技术支持&#xff0c;这个Tengine是什么东西呢&#xff1f;我搜索了下似乎是淘宝在nginx的基础上自己改的Web服务器 Tengine还支持OpenResty框架&#xff0c;该框架是基于Ngin…