【前端面试3+1】07vue2和vue3的区别、vue3响应原理及为什么使用proxy、vue的生命周期中在什么时期给接口发请求、【找出数组最大公约数】

一、vue2和vue3的区别

1.性能优化

        Vue 3在性能方面有很大的提升,主要是通过虚拟DOM的优化和响应式系统的改进实现的。

  • 虚拟 DOM 重构:Vue 3 中对虚拟 DOM 进行了重构,使得更新算法更加高效,减少了更新时的开销,提升了性能。
  • 静态树提升:Vue 3 可以通过静态树提升技术将静态节点提前标记,减少 diff 的计算量,加快页面渲染速度。
  • 编译器优化:Vue 3 的编译器进行了优化,生成的代码更加精简,运行时的性能得到了提升。

2.Composition API

        Vue 3引入了Composition API,使得组件逻辑可以更好地组织和复用,相比Vue 2的Options API更加灵活。

  • 更灵活的组织代码:Composition API 允许开发者根据逻辑功能组织代码,提高了代码的可维护性和复用性。
  • 更好的 TypeScript 支持:Composition API 更适合与 TypeScript 结合使用,提供了更好的类型推断和代码提示

3.Typescript支持

        Vue 3对Typescript的支持更加友好,内置了更多的类型定义,帮助开发者更好地进行类型检查。

4.Teleport

        Vue 3引入了Teleport特性,可以更方便地在DOM树中的任何位置渲染组件。

  • 更灵活的渲染位置:Teleport 允许开发者在组件内部将内容渲染到任意位置,提高了灵活性和可用性

5.Fragments

        Vue 3支持Fragments,可以在组件中返回多个根节点。

  • 多根节点支持:Vue 3 支持在组件中返回多个根节点,避免了以前只能有一个根节点的限制。

6.全局API的变化

        Vue 3中一些全局API的使用方式发生了变化,比如全局API的导入方式和Vue实例的创建方式等。

  • 全局 API 模块化:Vue 3 将一些全局 API 模块化,需要按需导入使用,减少了整体包的体积。
  • Vue 实例创建方式变化:Vue 3 中创建 Vue 实例的方式有所变化,需要使用 createApp 方法来创建应用实例。

二、vue3的响应式原理是什么? 为什么采用了 Proxy 对象?

1.响应原理:

        Vue 3的响应式原理主要是通过使用Proxy对象来实现的。当你在Vue组件中声明响应式的数据时,Vue会使用Proxy对象来监听这些数据的变化。当数据发生变化时,Vue会自动触发相关的更新操作,使得视图和数据保持同步.

        具体来说,Vue 3的响应式原理包括以下几个步骤:

        a.初始化阶段:在组件初始化阶段,Vue会使用Proxy对象对组件中声明的响应式数据进行监听。

        b.依赖收集:当组件渲染时,Vue会跟踪这些响应式数据的依赖关系,即哪些地方依赖于这些数据。

        c.数据变化检测:当响应式数据发生变化时,Proxy对象会捕获到这些变化,并通知Vue框架。

        d.触发更新:Vue会根据依赖关系,自动触发相关的更新操作,更新视图以反映数据的变化

2.Vue 3采用Proxy对象的主要原因包括:

  • 更灵活的监听Proxy对象可以监听整个对象的变化,而不像Object.defineProperty只能监听对象的属性。这意味着Vue 3可以更精确地跟踪对象的变化,并在需要时触发更新。

  • 深层监听:Proxy对象可以实现深层监听,即可以监听对象内部嵌套对象的变化。这使得Vue 3可以更好地处理嵌套数据结构的变化,提高了响应式系统的灵活性。

  • 删除属性的监听使用Proxy对象可以监听属性的删除操作,而Object.defineProperty无法监听属性的删除。这使得Vue 3可以更好地处理属性的动态增删操作。

  • 性能优化Proxy对象相比Object.defineProperty在性能上有一定优势,特别是在大规模数据变化时,Proxy对象的性能表现更好

 

三、vue的生命周期中,在什么时期给接口发请求?

        在Vue的生命周期中,通常在created生命周期钩子中给接口发送请求是一个常见的做法。在created生命周期钩子中,Vue实例已经创建完成,但尚未挂载到DOM上,此时可以进行一些初始化操作,比如发送网络请求获取数据

        在created生命周期钩子中发送请求的好处是可以确保在Vue实例创建完成后立即获取数据,以便在组件挂载到DOM之前就可以展示数据。另外,created生命周期钩子也是在Vue实例初始化阶段比较早的时机,可以尽早获取数据以提高用户体验。

export default {
  data() {
    return {
      responseData: null
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('https://api.example.com/data');
        this.responseData = response.data;
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }
  }
};

        在上面的示例中,我们在created生命周期钩子中调用fetchData方法发送请求,并将获取到的数据存储在responseData中。这样可以确保在组件创建完成后立即获取数据并更新视图。

四、【算法】找出数组最大公约数

1.题目:

        给你一个整数数组 nums ,返回数组中最大数和最小数的 最大公约数 。

        两个数的 最大公约数 是能够被两个数整除的最大正整数。

2.解题:

方1:

        这道题的解题思路是首先找到给定数组中的最小值和最大值,然后计算这两个数的最大公约数。

具体步骤如下:

  1. 遍历整数数组,找到数组中的最小值和最大值。
  2. 定义一个辅助函数gcd来计算两个整数的最大公约数。使用辗转相除法来计算最大公约数。
  3. 调用gcd函数,传入最大值和最小值,计算它们的最大公约数并返回。
int findGCD(int* nums, int numsSize) {
    int min = nums[0];
    int max = nums[0];
    
    // Find the minimum and maximum numbers in the array
    for (int i = 1; i < numsSize; i++) {
        if (nums[i] < min) {
            min = nums[i];
        }
        if (nums[i] > max) {
            max = nums[i];
        }
    }
    
    // Find the greatest common divisor
    return gcd(max, min);
}

int gcd(int a, int b) {
    if (b == 0) {
        return a;
    }
    return gcd(b, a % b);
}
方2:

       首先,通过两个循环找出数组中的最大值和最小值。然后从最小值开始递减,直到找到最大公约数为止。如果找到了最大公约数,则返回该值,否则返回0

int findGCD(int* nums, int numsSize) {
    int max=-1, min=1001; // 初始化最大值和最小值
    for(int i=0; i<numsSize; i++){ // 循环找出数组中的最大值
        if(nums[i]>max){
            max=nums[i];
        }
    }
    for(int i=0; i<numsSize; i++){ // 循环找出数组中的最小值
        if(nums[i]<min){
            min=nums[i];
        }
    }
    for(int i=min; i>=1; i--){ // 从最小值开始向下找最大公约数
        if(max%i==0 && min%i==0){ // 若找到最大公约数则返回
            return i;
        }
    }
    return 0; // 若未找到最大公约数则返回0
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

LCX端口转发

LCX介绍 LCX是一款端口转发工具&#xff0c;分为Windows版和Linux版&#xff0c;Linux版本为PortMap。LCX有端口映射和端口转发两大功能&#xff0c;例如当目标的3389端口只对内开放而不对外开放时&#xff0c;可以使用端口映射将3389端口映射到目标的其他端口使用&#xff1b…

iOS问题记录 - App Store审核新政策:隐私清单 SDK签名(持续更新)

文章目录 前言开发环境问题描述问题分析1. 隐私清单 & SDK签名1.1. 隐私清单 - 数据使用声明1.2. 隐私清单 - 所用API原因描述1.3. SDK签名 2. 即将发布的第三方SDK要求 解决方案最后 前言 前段时间用Flutter开发的iOS App提交了新版本&#xff0c;结果刚过两分钟就收到了…

属性选择器

1.[title]{background:yellow;}&#xff1a;所有带title标签设置成黄色 2.div[class]{background:yellow;}&#xff1a;所有div中带class标签设置成黄色 3.div[classbox1]{border:1px solid blue; }&#xff1a;div中包含class并且classbox1的设置成蓝边框 4. class…

【春秋云镜】CVE-2023-7106标靶Wp

0x01&#xff1a;漏洞点 老样子先&#xff0c;看看标题介绍奥 ok了解到了 我们现在要知道参数是prod_id&#xff0c;路径为/pages/product_details.php 0x02&#xff1a;操作 直接打开SQLmap一把梭 sqlmap -u {URL}/pages/product_details.php?prod_id1 --current-db 这里…

文件操作详解(一)

目录 一.文件的类型1.数据文件2.程序文件3.文件名 二. 二进制文件三.文本文件四. 文件的打开&#xff08;fopen&#xff09;和关闭&#xff08;fclose&#xff09;1.1流是什么1.2标准流 2.文件指针 一.文件的类型 存储在硬盘上的是文件&#xff0c;文件分为数据文件和程序文件…

上岸美团了!

Hello&#xff0c;大家好&#xff0c;最近春招正在如火如荼&#xff0c;给大家分享一份美团的面经&#xff0c;作者是一份某双非的硕&#xff08;只如初见668&#xff09;&#xff0c;刚刚通过了美团的3轮面试&#xff0c;已经拿到offer&#xff0c;以下是他的一些分享。 一面&…

9.处理消息边界

网络编程中消息的长度是不太确定的&#xff0c;read方法读取字节数据到ByteBuffer中&#xff0c;ByteBuffer会有一个固定容量&#xff0c;单次超出容量的部分字节数据将会在下一次的ByteBuffer中&#xff0c;这样消息就会按照字节截断&#xff0c;出现消息边界问题。 Http 2.0 …

【pytest、playwright】多账号同时操作

目录 方案实现思路&#xff1a; 方案一&#xff1a; 方案二&#xff1a; 方案实现思路&#xff1a; 依照上图所见&#xff0c;就知道&#xff0c;一个账号是pytest-playwright默认的环境&#xff0c;一个是 账号登录的环境 方案一&#xff1a; 直接上代码&#xff1a; imp…

gtsam::Pose3的compose()函数作用

#include <gtsam/geometry/Pose3.h> #include <iostream> int main(int argc, char** argv) {// B 的旋转量为绕 x 轴旋转 180 度gtsam::Pose3 B gtsam::Pose3(gtsam::Rot3(0, 1, 0, 0), gtsam::Point3(1, 2, 0));// A 的旋转量为绕 z 轴旋转 180 度gtsam::Pose3 A…

MySQL中如何进行多表查询

目录 一、子查询 1.什么是子查询 2.注意事项 二、联结查询 1.什么是联结 2.内部联结&#xff08;等值联结&#xff09; ①WHERE语句 ②ON语句 3.自联结 4.自然联结 5.外部联结 三、组合查询 1.什么是组合查询 2.UNION规则 *本节涉及概念来源于图灵程序设计丛书&a…

latex伪代码一些记录

参考一 参考二 参考三 使用minipage 最终调整好的效果&#xff1a; $ \begin{document} \begin{center} \begin{minipage}{15.92cm} \renewcommand{\thealgorithm}{1} \begin{CJK}{GBK}{song} \begin{algorithm}[H]\caption{ \text{算法1&#xff1a;xxx}}\begin{algorith…

基于SpringBoot和Vue的学生笔记共享平台的设计与实现

今天要和大家聊的是一款基于SpringBoot和Vue的学生笔记共享平台的设计与实现 &#xff01;&#xff01;&#xff01; 有需要的小伙伴可以通过文章末尾名片咨询我哦&#xff01;&#xff01;&#xff01; &#x1f495;&#x1f495;作者&#xff1a;李同学 &#x1f495;&…

Linux中断管理:(一)中断号的映射

文章说明&#xff1a; Linux内核版本&#xff1a;5.0 架构&#xff1a;ARM64 参考资料及图片来源&#xff1a;《奔跑吧Linux内核》 Linux 5.0内核源码注释仓库地址&#xff1a; zhangzihengya/LinuxSourceCode_v5.0_study (github.com) 1. 中断控制器 Linux 内核支持众多…

TCP通信——端口转发(重点内容)

实现多人群聊 Client(客户端&#xff09;建立通信 package com.zz.tcp.case1;import java.io.DataOutputStream; import java.io.IOException; import java.io.OutputStream; import java.net.Socket; import java.util.Scanner;public class Client {public static void mai…

Java- maven下载jar包,提示找不到,Could not find artifact

1、执行下面命令行 mvn install:install-file -Dfile/home/quangang/桌面/isv-sdk-2.0.jar -DgroupIdcom.jd -DartifactIdisv-sdk -Dversion2.0 -Dpackangjar 2、然后这里要加上jar包

Linux(CentOS 7 )基于git、maven实现springboot自动化部署

前提 1、已安装git、maven、java环境 不清楚的可以看另一篇文章&#xff1a; https://blog.csdn.net/weixin_44646763/article/details/137041469 2、已为项目设置远程 git 仓库 origin (可以通过&#xff1a;git remote add origin https://github.com/xxx/xxx.git设置) 创…

MCRNet:用于乳腺超声成像语义分割的多级上下文细化网络

MCRNet&#xff1a;用于乳腺超声成像语义分割的多级上下文细化网络 摘要引言方法 MCRNet_ Multi-level context refinement network for semantic segmentation in breast ultrasound imaging 摘要 由于对比度差、目标边界模糊和大量阴影的不利影响&#xff0c;乳腺超声成像中…

基于ssm校园教务系统论文

摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对校园教务信息管理混乱&#xff0c;出错率高&#xff0c;信息安全性差…

数据结构——优先级队列及多服务台模拟系统的实现

一、优先级队列的定义和存储 优先级队列定义&#xff1a;优先级高的元素在队头&#xff0c;优先级低的元素在队尾 基于普通线性表实现优先级队列&#xff0c;入队和出队中必有一个时间复杂度O(n),基于二叉树结构实现优先级队列&#xff0c;能够让入队和出队时间复杂度都为O(log…

WPF碎片

1、Style作为资源可放在控件自身资源下&#xff0c;也可以放在上级控件下如Window.Resources甚至Application.Resources下&#xff0c;但第二种方法需要加为Style添加key并通过Style"{StaticResource xxx}类似方式调用&#xff0c;而前者控件直接默认使用&#xff1b; 方法…