Vue3.0 高频出现的几道面试题

凯特林
• 阅读 1343

Vue3.0 高频出现的几道面试题

1、Vue 3.0 性能提升主要是通过哪几方面体现的?

1.响应式系统提升

vue2在初始化的时候,对data中的每个属性使用definepropery调用getter和setter使之变为响应式对象。如果属性值为对象,还会递归调用defineproperty使之变为响应式对象。

vue3使用proxy对象重写响应式。proxy的性能本来比defineproperty好,proxy可以拦截属性的访问、赋值、删除等操作,不需要初始化的时候遍历所有属性,另外有多层属性嵌套的话,只有访问某个属性的时候,才会递归处理下一级的属性。

优势:

  • 可以监听动态新增的属性;

  • 可以监听删除的属性 ;

  • 可以监听数组的索引和 length 属性;

2. 编译优化

优化编译和重写虚拟dom,让首次渲染和更新dom性能有更大的提升 vue2 通过标记静态根节点,优化 diff 算法 vue3 标记和提升所有静态根节点,diff 的时候只比较动态节点内容

Fragments, 模板里面不用创建唯一根节点,可以直接放同级标签和文本内容

静态提升

patch flag, 跳过静态节点,直接对比动态节点,缓存事件处理函数

3. 源码体积的优化

vue3移除了一些不常用的api,例如:inline-template、filter等 使用tree-shaking

2. Composition Api 与 Vue 2.x使用的Options Api 有什么区别?

Options Api

包含一个描述组件选项(data、methods、props等)的对象 options;

API开发复杂组件,同一个功能逻辑的代码被拆分到不同选项 ;

使用mixin重用公用代码,也有问题:命名冲突,数据来源不清晰;

composition Api

vue3 新增的一组 api,它是基于函数的 api,可以更灵活的组织组件的逻辑。

解决options api在大型项目中,options api不好拆分和重用的问题。

3. Proxy 相对于 Object.defineProperty

有哪些优点?

proxy的性能本来比defineproperty好,proxy可以拦截属性的访问、赋值、删除等操作,不需要初始化的时候遍历所有属性,另外有多层属性嵌套的话,只有访问某个属性的时候,才会递归处理下一级的属性。

  • 可以* 监听数组变化

  • 可以劫持整个对象

  • 操作时不是对原对象操作,是 new Proxy 返回的一个新对象

  • 可以劫持的操作有 13 种

4. Vue 3.0 在编译方面有哪些优化?

vue.js 3.x中标记和提升所有的静态节点,diff的时候只需要对比动态节点内容;

Fragments(升级vetur插件):

template中不需要唯一根节点,可以直接放文本或者同级标签

静态提升(hoistStatic),当使用 hoistStatic 时,所有静态的节点都被提升到 render 方法之外.只会在应用启动的时候被创建一次,之后使用只需要应用提取的静态节点,随着每次的渲染被不停的复用。

patch flag, 在动态标签末尾加上相应的标记,只能带 patchFlag 的节点才被认为是动态的元素,会被追踪属性的修改,能快速的找到动态节点,而不用逐个逐层遍历,提高了虚拟dom diff的性能。

缓存事件处理函数cacheHandler,避免每次触发都要重新生成全新的function去更新之前的函数 tree shaking 通过摇树优化核心库体积,减少不必要的代码量

5. Vue.js 3.0 响应式系统的实现原理?

1. reactive

设置对象为响应式对象。接收一个参数,判断这参数是否是对象。不是对象则直接返回这个参数,不做响应式处理。创建拦截器handerler,设置get/set/deleteproperty。

get

  • 收集依赖(track);

  • 如果当前 key 的值是对象,则为当前 key 的对

  • 象创建拦截器 handler, 设置 get/set/deleteProperty;

如果当前的 key 的值不是对象,则返回当前 key 的值。

set

设置的新值和老值不相等时,更新为新值,并触发更新(trigger)。

deleteProperty 当前对象有这个 key 的时候,删除这个 key 并触发更新(trigger)。

2. effect

接收一个函数作为参数。作用是:访问响应式对象属性时去收集依赖

3. track

接收两个参数:target 和 key

-如果没有 activeEffect,则说明没有创建 effect 依赖

-如果有 activeEffect,则去判断 WeakMap 集合中是否有 target 属性

-WeakMap 集合中没有 target 属性,则 set(target, (depsMap = new Map()))

-WeakMap 集合中有 target 属性,则判断 target 属性的 map 值的 depsMap 中是否有 key 属性

-depsMap 中没有 key 属性,则 set(key, (dep = new Set())) -depsMap 中有 key 属性,则添加这个 activeEffect

4.trigger

判断 WeakMap 中是否有 target 属性,WeakMap 中有 target 属性,则判断 target 属性的 map 值中是否有 key 属性,有的话循环触发收集的 effect()。

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Souleigh ✨ Souleigh ✨
2年前
Vue3 - 响应性API
前言Vue3.x正式版发布已经快半年了,相信大家也多多少少也用Vue3.x开发过项目。那么,我们今天就整理下Vue3.x中的响应性API。响应性APIreactive作用:创建一个响应式数据。本质:传入数据(复杂类型:数组和json对象)包装成一个Proxy对象。如果传入其他对象,默认情况下修改对象,界面不会自动更新,如果想更新,可以通过重新赋值(创建
Souleigh ✨ Souleigh ✨
3年前
Vue3.0 高频出现的几道面试题
1.Vue3.0性能提升主要是通过哪几方面体现的?1.响应式系统提升vue2在初始化的时候,对data中的每个属性使用definepropery调用getter和setter使之变为响应式对象。如果属性值为对象,还会递归调用defineproperty使之变为响应式对象。vue3使用proxy对象重写响应式。proxy的性能本来比def
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
LinMeng LinMeng
1年前
Vue3学习笔记---Vue3带来了什么
1.性能的提升打包大小减少了41%初次渲染快55%,更新渲染快133%内存减少54%...2.源码的升级使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和TreeShaking(是一个通常用于描述移除JavaScript上下文中的未引用代码(deadcode)行为的术语,它依赖于ES2015中的import和ex
Jacquelyn38 Jacquelyn38
2年前
「快速学习系列」我熬夜整理了Vue3.x响应性API
前言Vue3.x正式版发布已经快半年了,相信大家也多多少少也用Vue3.x开发过项目。那么,我们今天就整理下Vue3.x中的响应性API。响应性APIreactive作用:创建一个响应式数据。本质:传入数据(复杂类型:数组和json对象)包装成一个Proxy对象。如果传入其他对象,默认情况下修改对象,界面不会自动更新,如果想更新,可以通过重新赋值(创建
Easter79 Easter79
2年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Easter79 Easter79
2年前
Spring两种依赖注入方式的比较
我们知道,Spring对象属性的注入方式有两种:设值注入和构造注入。先看代码:  假设有个类为People,该对象包含三个属性,name和school还有age,这些属性都有各自的setter和getter方法,还有一个包含这三个属性的构造方法。如果用spring来管理这个对象,那么有以下两种方式为People设置属性:  1.设值注入:
乐和 乐和
1个月前
尚硅谷Vue3快速上手(2024)
尚硅谷Vue3快速上手(2024)download》shanxueit.com/4082/Vue3和Vue2版本对比Vue3和Vue2版本之间存在一些关键差异,主要包括以下几个方面:响应式原理:Vue2使用Object.defineProperty实现响应