vue面试题十四

一、Vue 3的Composition API主要包括哪些函数和钩子?

Vue 3的Composition API主要包括以下几个方面的函数和钩子:

1. 响应式引用和状态

  • ref:用于创建响应式引用,接收一个值并返回一个响应式且可变的ref对象。在模板中可以直接访问ref对象包裹的值,无需.value
  • reactive:用于创建响应式对象,返回一个响应式的代理对象(Proxy)。该对象可以包含多个响应式属性。

2. 生命周期钩子

  • onBeforeMount:组件挂载到 DOM 之前调用。
  • onMounted:组件挂载到 DOM 后调用。
  • onBeforeUpdate:数据更新时调用,发生在虚拟 DOM 打补丁之前。
  • onUpdated:组件 DOM 更新后调用。
  • onBeforeUnmount:组件卸载之前调用。
  • onUnmounted:组件卸载后调用。

3. 依赖注入

  • provide:允许祖先组件向其所有子孙后代组件提供可用的属性。
  • inject:允许一个子孙组件获取祖先组件中通过 provide/inject 提供的属性。

4. 逻辑复用

  • setup:Composition API 的入口点,替代了 Vue 2.x 中的选项式 API。
  • computed:与 Vue 2.x 类似,用于创建计算属性。
  • watch:侦听特定的响应式数据,并在其变动时运行回调。
  • watchEffect:立即运行一个函数,并响应式地追踪其依赖,并在其依赖变更时重新运行该函数。

5. 辅助函数

  • toRefs:将响应式对象转换为普通对象,其中结果对象的每个属性都是指向原始对象相应属性的 ref。
  • isRef:检查一个值是否为一个 ref 对象。
  • isReactive:检查一个对象是否是由 reactive 创建的响应式代理。
  • isReadonly:检查一个对象是否是由 readonly 创建的只读代理。

6. 模板引用

  • ref(模板中使用):在模板中用于创建对元素的引用。

7. 其他

  • shallowRefshallowReactive:用于创建浅层的响应式引用和对象。
  • customRef:创建一个自定义的 ref,并对其依赖项进行追踪。

这些函数和钩子共同构成了Vue 3的Composition API,为开发者提供了更加灵活和可复用的代码组织方式。

二、请解释Vue 3的响应式系统是如何工作的?

Vue 3的响应式系统是基于ES6的Proxy对象和Reflect API实现的,其工作原理可以概括如下:

  1. Proxy代理

    • 当一个Vue组件被创建时,Vue会使用Proxy对象来创建一个响应式代理对象,这个代理对象会“包裹”组件的data对象。
    • Proxy对象允许Vue拦截并自定义data对象上任意属性的读取(get)和修改(set)。
  2. 数据劫持

    • Vue通过Proxy对象的getter和setter方法来实现对data对象属性的“劫持”。
    • 当组件的data对象中的某个属性被访问时,会触发Proxy对象的getter方法,Vue会在这里进行依赖收集。
    • 当组件的data对象中的某个属性被修改时,会触发Proxy对象的setter方法,Vue会在这里进行依赖通知和更新操作。
  3. 依赖收集和触发

    • 依赖收集是Vue响应式系统的核心机制之一。当组件的某个属性被访问时,Vue会记录下当前正在计算这个属性的所有依赖(例如计算属性、侦听器、渲染函数等)。
    • 当data对象的某个属性发生变化时,Vue会遍历这个属性的所有依赖,并通知它们进行更新。
  4. 组件更新

    • 当组件的data对象发生变化时,Vue会触发组件的重新渲染。在这个过程中,Vue会重新执行组件的渲染函数,生成新的虚拟DOM树。
    • 然后,Vue会对比新旧虚拟DOM树,找出需要更新的真实DOM节点,并只更新这些节点,从而实现高效的DOM更新。
  5. 优化性能

    • Vue 3的响应式系统通过Proxy和Reflect API的使用,使得数据的变化能够被更精确地追踪和响应,从而减少了不必要的计算和DOM更新。
    • 同时,Vue 3还通过优化Diff算法和虚拟DOM的实现,进一步提高了组件的渲染性能。

总结来说,Vue 3的响应式系统通过Proxy代理和依赖收集机制,实现了对组件数据变化的精确追踪和高效响应。这种机制使得Vue 3在性能上有了显著提升,同时也为开发者提供了更加灵活和强大的数据驱动视图的能力。

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

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

相关文章

2024年【陕西省安全员C证】考试及陕西省安全员C证最新解析

题库来源:安全生产模拟考试一点通公众号小程序 陕西省安全员C证考试参考答案及陕西省安全员C证考试试题解析是安全生产模拟考试一点通题库老师及陕西省安全员C证操作证已考过的学员汇总,相对有效帮助陕西省安全员C证最新解析学员顺利通过考试。 1、【多…

155. 最小栈 力扣 python 空间换时间 o(1) 腾讯面试题

设计一个支持 push ,pop ,top 操作,并能在常数时间内检索到最小元素的栈。 实现 MinStack 类: MinStack() 初始化堆栈对象。void push(int val) 将元素val推入堆栈。void pop() 删除堆栈顶部的元素。int top() 获取堆栈顶部的元素。int get…

【学习笔记】MySQL(Ⅲ)

MySQL(Ⅲ) 11、 进阶篇 —— 视图 11.1、概述 11.2、基本语法 11.3、检查选项 CASCADED 11.4、检查选项 LOCAL 11.5、视图的更新原则12、 进阶篇 —— 存储过程 12.1、概述 12.2、基本语法 12.3、系统变量 12.4、用户定义变量 …

x86计算机的启动初期流程 Linux 启动流程

x86计算机的启动初期流程 CPU: step1,加点开机,cpu自己初始化 step2,cpu 从物理地址 0xFFFFFFF0h 取指令执行;此处存放BIOS代码,这些代码可以是由主板自动从 EEPROM中拷贝至此内存地址处;即下…

MySQL 日志(二)

本篇将继续介绍MySQL日志的相关内容 目录 一、二进制日志 简介 注意事项 删除二进制日志 查看二进制日志 二进制日志的格式 二、服务器日志维护 一、二进制日志 简介 二进制日志中主要记录了MySQL的更改事件(不包含SELECT和SHOW),例如:表的…

Java关键字

一、什么是关键字? 关键字是java语言中一些被赋予特定意义的一些单词,不可以把它当做标识符来使用。 在java中有两个特殊的关键字goto、const,我们称这两个关键字为保留字。 二、Java中的关键字有哪些? 1)48个关键…

【刷力扣】23. 合并 K 个升序链表(dummy节点技巧 + 分治思维 + 优先队列)

目录 一、合并升序链表问题二、题目:[21. 合并两个有序链表](https://leetcode.cn/problems/merge-two-sorted-lists/description/)1、掌握dummy节点的技巧 三、题目:[23. 合并 K 个升序链表](https://leetcode.cn/problems/merge-k-sorted-lists/descri…

模拟题1(考虑周全以及情况较多)

牛客小白月赛96(重现赛)D题 题目解析以及注意事项 该题主要是找线路最多和最少的各种情况&#xff0c;从而达到整体连通图的构建代价最小的情况。 注意事项&#xff1a;a,b的正负影响着这个图的线尽可能的多还是少 思路图 { a ≥ b { b < 0 a < 0 : 能连的线都连上 b…

Android 工程副总裁卸任

Android 工程副总裁卸任 Android工程副总裁Dave Burke宣布&#xff0c;他将辞去领导Android工程的职位&#xff0c;将重心转向“AI/生物”项目。不过&#xff0c;他并没有离开Alphabet&#xff0c;目前仍将担任Android系统开发顾问的角色。 Burke参与了Android系统的多个关键…

CSS伪类与伪元素的区别

CSS中的伪类&#xff08;Pseudo-classes&#xff09;和伪元素&#xff08;Pseudo-elements&#xff09;是两个不同的概念&#xff0c;它们的主要区别在于它们的作用和目标。 伪类&#xff08;Pseudo-classes&#xff09; 伪类用于选择处于特定状态的元素。这些状态并不是由HT…

【TypeScript】类型兼容(协变、逆变和双向协变)

跟着小满zs 学习 ts&#xff0c;原文&#xff1a;学习TypeScript进阶类型兼容_typescript进阶阶段类型兼容 小满-CSDN博客 类型兼容&#xff0c;就是用于确定一个类型是否能赋值给其他的类型。如果A要兼容B 那么A至少具有B相同的属性。 // 主类型 interface A {name: string,a…

边界内聚和耦合

内聚 功能内聚 功能内聚是软件工程中一个重要的概念&#xff0c;它描述了一个模块内部各个元素之间的紧密程度。一个具有高功能内聚的模块意味着其内部的各个组件都共同完成一个具体的、明确的功能&#xff0c;并且这些组件之间的联系不是偶然的&#xff0c;而是因为它们共同服…

快手爬票概述

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 无论是出差还是旅行&#xff0c;都无法离开交通工具的支持。现如今随着科技水平的提高&#xff0c;高铁与动车成为人们喜爱的交通工具。如果想要知道…

【C语言】联合(共用体)

目录 一、什么是联合体 二、联合类型的声明 三、联合变量的创建 四、联合的特点 五、联合体大小的计算 六、联合的应用&#xff08;判断大小端&#xff09; 七、联合体的优缺点 7.1 优点 7.2 缺点 一、什么是联合体 联合也是一种特殊的自定义类型。由多个不同类型的数…

SqlSugar 集成

1 关于 SqlSugar SqlSugar 是 .NET/C# 平台非常优秀的 ORM 框架&#xff0c;目前 Nuget 总下载突破 700K&#xff0c;Github 关注量也高达 3.2K&#xff0c;是目前当之无愧的国产优秀 ORM 框架之一。 SqlSugar 官方地址&#xff1a;果糖网 &#xff08; SqlSugar 官网 &#…

LVS三种负载均衡模式:NAT、Tunneling和DR的技术对比

1. LVS-NAT 模式的特性 IP使用&#xff1a;RS&#xff08;Real Server&#xff09;应使用私有地址&#xff0c;RS的网关必须指向DIP&#xff08;Director IP&#xff09;。网络范围&#xff1a;DIP和RIP必须在同一个网段内。数据包处理&#xff1a;请求和响应报文都需要经过Di…

Vue 3 组合式编程:革新前端开发的新时代

Vue.js作为一种流行的前端框架&#xff0c;因其简洁、灵活和高性能而深受开发者喜爱。随着前端开发需求的不断演变和复杂度的增加&#xff0c;Vue.js也在不断地进化和改进。Vue 3的推出标志着Vue.js进入了一个新的阶段&#xff0c;其中最重要的一个变化就是引入了组合式编程&am…

数据库开发——并发控制(第十一章)

文章目录 前言并发执行例题一、封锁二、封锁协议三、可串行调度四、总结 学习目标&#xff1a;重点为并发控制的基本概念及几个基本协议 前言 数据库管理系统必须提供并发控制机制&#xff0c;保证事务的隔离性和一致性 并发执行例题 一、封锁 排他锁称为写锁&#xff0c;共…

react-redux搭建及不同版本间的对比

一.经典版 1. 安装Redux和React Redux npm install redux react-redux 2. 创建action // actions/counterActions.js export const increment () > {return {type: INCREMENT}; };export const decrement () > {return {type: DECREMENT}; };export const add (amo…

atmega8 上传程序

使用icsp 烧写时先关闭串口程序&#xff0c;与串口uart连接相关的电路勿于电脑连接 接触不良 1.使用icsp 上传 1&#xff09;可以直接上传程序 如官方示例blink 或是 serial示例 2&#xff09;可以先烧录bootload 方便下次使用串口上传程序代码 A)使用专门的icsp 上传器上传…