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

Souleigh ✨ 等级 737 2 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()。

收藏
评论区

相关推荐

Vue3.0--Vue Composition API使用体验
本文将之前采用Vue2.6开发的todoList小项目改造成为Vue3.0编写,并介绍一下2.x和3.x之间写法的不同之处。 Vue3.x适配大部分Vue2.x的组件配置,也就是说以前我们在Vue2.x针对组件的一些配置项,例如: export default { name: 'test', components: {}, props: {},
Vue3.0 高频出现的几道面试题
1. Vue 3.0 性能提升主要是通过哪几方面体现的? 1.响应式系统提升 vue2在初始化的时候,对data中的每个属性使用definepropery调用getter和setter使之变为响应式对象。如果属性值为对象,还会递归调用defineproperty使之变为响应式对象。 vue3使用proxy对象重写响应式。proxy的性能本来比def
Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同?
开始之前 Composition API 可以说是Vue3最大的特点,那么为什么要推出Composition Api,解决了什么问题? 通常使用Vue2开发
Vue3 + Vuex4 构建点餐页面
前言 前进!前进!不择手段地前进!!距离Vue3.0 beta 发布已经过了半个多月了。本来这个东西上个月就应该写了,由于公司上个月赶项目一直没时间。趁着劳动节把这个东西写了一下,也顺便把一些坑过了一下。 介绍页面比较简单,算是把 Composition API 过了一下了 基于Vue3.0 beta 这种页面也比较老套了 涉及了
Vue3.0系列——「vue3.0学习手册」第一期
Vue3.0一、项目搭建vite是尤大大开发的一款意图取代webpack的工具。其实现原理是利用ES6的import发送请求加载文件的特性。拦截这些请求,做一些编译,省去webpack冗长的打包时间。并将其与Rollup捆绑在一起用于生产。在开发过程中没有捆绑。源代码中的ES Import语法直接提供给浏览器,浏览器通过本机<script module支持对
Vue3.0系列——「vue3.0性能是如何变快的?」
前言1. 先学习vue2.x,很多2.x内容依然保留; 2. 先学习TypeScript,vue3.0是用TS重写的,想知其然知其所以然必须学习TS。 为什么学习vue3.0? 性能比vue2.x快1.2~2倍 按需编译,体积比vue2.x更小 组合API(类似React Hook) 更好的TS支持
JS 百度地图 换地图主题颜色(API自带)
JS 百度地图 换地图主题颜色(API自带) ---------------------- <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=PlhFWpA02aoURjAOpnWcRGqw7AI8EEyO"></scr
10个前端8个用Vue的,怎么才能在面试中出彩?
现在但凡出去面试,面试官几乎必问 Vue3.0 。不仅会问一些核心特性,还会问原理层面的问题。 比如: **▶框架层面问题:**Vue3.0 新特性 Composition API 与 React.js 中 Hooks 的异同点? **▶源码、原理层面问题:** Vue3.0 编译做了哪些优化?Vue3.0是如何变得更快的?
2021年,Vue会变成什么样?
7月17日,Vue3.0进入了RC.1阶段,7月20日,Vue3.0进入了RC.2阶段。 ![](https://oscimg.oschina.net/oscnet/c5afc4a6-215f-430a-b747-e7f13d828fff.png) RC阶段即是发行候选版本,如果未出现问题则可发布成为正式版本。多数开源软件会推出两个R
2021年,Vue会变成什么样?
7月17日,Vue3.0进入了RC.1阶段,7月20日,Vue3.0进入了RC.2阶段。 ![](https://oscimg.oschina.net/oscnet/c5afc4a6-215f-430a-b747-e7f13d828fff.png) RC阶段即是发行候选版本,如果未出现问题则可发布成为正式版本。多数开源软件会推出两个R
Android常见错误
1、Unable to resolve target 'android-2' 安装低版本的api,再default.properties 这个文件中把target=android-2 改成 target=android-7终于就没有问题了。 2、Invalid start tag LinearLayout main.xml放错文件夹了,应该在\\res\
Console Api 让 JS 调试更简单、高效
> 所有Console Api  <script type="text/javascript"> console.dir(console); </script> ![](https://oscimg.oschina.net/oscnet/95a860f3d4ec5a09ee3f53761b64594745e.jpg)
ES6的Object.assign()基本用法
`Object.assign`方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。   例如:   const target = {a:1},   const source1 = {b:2}   const source2 = {c:3}; Object.assign(target, source1,sou
JavaScript 返回具体类型方法
/** * 返回target类型 * @param {} target */ function type(target) { var ret = typeof (target); var template = { "[object Array]": "ar
Linux 命令 mv
mv 命令 ===== \--no-target-directory 参数确保对目录进行重命名而不是移动 ---------------------------------------- [https://www.gnu.org/software/coreutils/manual/html\_node/Target-directory.html#Targ