首页 > 其他分享 >【面试题】888- Vue3.0 高频出现的几道面试题

【面试题】888- Vue3.0 高频出现的几道面试题

时间:2022-09-30 12:00:32浏览次数:44  
标签:面试题 target 对象 888 静态 Vue3.0 key 节点 属性

【面试题】888- 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()。

作者:大唐荣华


【面试题】888- Vue3.0 高频出现的几道面试题_响应式_02


标签:面试题,target,对象,888,静态,Vue3.0,key,节点,属性
From: https://blog.51cto.com/u_11887782/5725763

相关文章

  • Vue面试题27:为什么要使用路由懒加载?(总结自B站up主‘前端杨村长’视频,仅供自用学习)
    这是一道应用题。当打包应用时,JavaScript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问时才加载对应组件,这样就会更加......
  • 学习过程中老师提到的面试题
    publicclassdemo3{publicstaticvoidmain(String[]args){//整数拓展:进制二进制0b十进制八进制0十六进制0xinti=10;......
  • 数据类型扩展及面试题
    数据类型强类型语言要求变量的使用要严格符合规定,所有变量都必须先定义后才能使用注:String=''字符串''(英文或中文)弱类型语言变量的使用不需要严格符合规定......
  • redis面试题
    一、线程1.1、redis是单线程还是多线程Redis6.0版本以前的单线程是指其网络I/O和键值对读写是由一个线程完成的Redis6.0引入的多线程指的是网络请求过程采用了多线程,而......
  • ypeScript核心基础面试题与答案
    1、为什么越来越多的企业选择使用TypeScript?2、TypeScript中的原始类型有哪些?3、说说数组在TypeScript中是如何工作的?4、什么是any类型,何时使用?5、什么是void,什么......
  • 面试题 01.09. 字符串轮转【暴力模拟】【尾插】
    题目字符串轮转。给定两个字符串s1和s2,请编写代码检查s2是否为s1旋转而成(比如,waterbottle是erbottlewat旋转后的字符串)。难度:简单提示:字符串长度在[0,100000]范围内......
  • Js手写面试题5-Promise
    Promise❓有任何疑问都可以私信我解答⚡仓库地址:https://gitee.com/super_li_yu/promise......
  • Vue3.0 如何写自定义指令
    背景问:什么是指令?答:指令就是DOM与逻辑行为的媒介,本质就是DOM绑定的独立逻辑行为函数。除了核心功能默认内置的指令(例如v-model和v-show),Vue也允许注册自定义指令。Vu......
  • REDIS面试题(7)
    20 Redis的大key问题  21如何解决Redis使用key命名阻塞的问题? 如果想要获取整个实例的所有key,建议使用SCAN命令代替。客户端通过执行SCAN$cursorCOUNT$count......
  • 面试题:海量数据处理利器-布隆过滤器
    目录概念原理布隆过滤器的使用场景简单模拟布隆过滤器Guava布隆过滤器Redis布隆过滤器布谷鸟过滤器作者:小牛呼噜噜|https://xiaoniuhululu.com计算机内功、JAVA底层、......