关于vue.js:一次关于Vue的自我模拟面试

前言

昨晚做了一个梦，梦见本人到了一家大厂面试，面试官走近房间，坐了下来：是杨溜溜吧？国际惯例，先来个自我介绍吧。

于是我巴拉巴拉开始了长达两分钟的自我介绍，与此同时，面试官边听边看我的简历，边看边皱眉，完结后问：看你之前的我的项目常常用到 Vue，对 Vue 相熟吗？

我嘴角一笑，心里暗喜：幸好有专门看 Vue 的面试题，看来这次稳了。于是虚心又装逼的答复：还行吧，您轻易问。

于是面试官看我口气那么大，心想：哟嚯，来了一个装逼的，劳资明天就只问 Vue。

原文地址 欢送 star

来，先介绍一下 Vue 的响应式零碎

Vue 为 MVVM 框架，当数据模型 data 变动时，页面视图会失去响应更新，其原理对 data 的 getter/setter 办法进行拦挡（Object.defineProperty 或者 Proxy），利用公布订阅的设计模式，在 getter 办法中进行订阅，在 setter 办法中公布告诉，让所有订阅者实现响应。

在响应式零碎中，Vue 会为数据模型 data 的每一个属性新建一个订阅核心作为发布者，而监听器 watch、计算属性 computed、视图渲染 template/render 三个角色同时作为订阅者，对于监听器 watch，会间接订阅察看监听的属性，对于计算属性 computed 和视图渲染 template/render，如果外部执行获取了 data 的某个属性，就会执行该属性的 getter 办法，而后主动实现对该属性的订阅，当属性被批改时，就会执行该属性的 setter 办法，从而实现该属性的公布告诉，告诉所有订阅者进行更新。

computed 与 watch 的区别

计算属性 computed 和监听器 watch 都能够察看属性的变动从而做出响应，不同的是：

计算属性 computed 更多是作为缓存性能的观察者，它能够将一个或者多个 data 的属性进行简单的计算生成一个新的值，提供给渲染函数应用，当依赖的属性变动时，computed 不会立刻从新计算生成新的值，而是先标记为脏数据，当下次 computed 被获取时候，才会进行从新计算并返回。

而监听器 watch 并不具备缓存性，监听器 watch 提供一个监听函数，当监听的属性发生变化时，会立刻执行该函数。

介绍一下 Vue 的生命周期

beforeCreate：是 new Vue()之后触发的第一个钩子，在以后阶段 data、methods、computed 以及 watch 上的数据和办法都不能被拜访。

created：在实例创立实现后产生，以后阶段曾经实现了数据观测，也就是能够应用数据，更改数据，在这里更改数据不会触发 updated 函数。能够做一些初始数据的获取，在以后阶段无奈与 Dom 进行交互，如果非要想，能够通过 vm.$nextTick 来拜访 Dom。

beforeMount：产生在挂载之前，在这之前 template 模板已导入渲染函数编译。而以后阶段虚构 Dom 曾经创立实现，行将开始渲染。在此时也能够对数据进行更改，不会触发 updated。

mounted：在挂载实现后产生，在以后阶段，实在的 Dom 挂载结束，数据实现双向绑定，能够拜访到 Dom 节点，应用 $refs 属性对 Dom 进行操作。

beforeUpdate：产生在更新之前，也就是响应式数据产生更新，虚构 dom 从新渲染之前被触发，你能够在以后阶段进行更改数据，不会造成重渲染。

updated：产生在更新实现之后，以后阶段组件 Dom 已实现更新。要留神的是防止在此期间更改数据，因为这可能会导致有限循环的更新。

beforeDestroy：产生在实例销毁之前，在以后阶段实例齐全能够被应用，咱们能够在这时进行善后收尾工作，比方革除计时器。

destroyed：产生在实例销毁之后，这个时候只剩下了 dom 空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也通通被销毁。

为什么组件的 data 必须是一个函数

一个组件可能在很多中央应用，也就是会创立很多个实例，如果 data 是一个对象的话，对象是援用类型，一个实例批改了 data 会影响到其余实例，所以 data 必须应用函数，为每一个实例创立一个属于本人的 data，使其同一个组件的不同实例互不影响。

组件之间是怎么通信的

• 父子组件通信

父组件 -> 子组件：prop

子组件 -> 父组件：$on/$emit

获取组件实例：应用$parent/$children，$refs.xxx，获取到实例后间接获取属性数据或调用组件办法

• 兄弟组件通信

Event Bus：每一个 Vue 实例都是一个 Event Bus，都反对$on/$emit，能够为兄弟组件的实例之间 new 一个 Vue 实例，作为 Event Bus 进行通信。

Vuex：将状态和办法提取到 Vuex，实现共享

• 跨级组件通信

应用 provide/inject

Event Bus：同兄弟组件 Event Bus 通信

Vuex：将状态和办法提取到 Vuex，实现共享

Vue 事件绑定原理说一下

每一个 Vue 实例都是一个 Event Bus，当子组件被创立的时候，父组件将事件传递给子组件，子组件初始化的时候是有 $on 办法将事件注册到外部，在须要的时候应用 $emit 触发函数，而对于原生 native 事件，应用 addEventListener 绑定到实在的 DOM 元素上。

slot 是什么？有什么作用？原理是什么？

slot 又名插槽，是 Vue 的内容散发机制，组件外部的模板引擎应用 slot 元素作为承载散发内容的进口。插槽 slot 是子组件的一个模板标签元素，而这一个标签元素是否显示，以及怎么显示是由父组件决定的。

slot 又分三类，默认插槽，具名插槽和作用域插槽。

• 默认插槽：又名匿名查抄，当 slot 没有指定 name 属性值的时候一个默认显示插槽，一个组件内只有有一个匿名插槽。
• 具名插槽：带有具体名字的插槽，也就是带有 name 属性的 slot，一个组件能够呈现多个具名插槽。
• 作用域插槽：默认插槽、具名插槽的一个变体，能够是匿名插槽，也能够是具名插槽，该插槽的不同点是在子组件渲染作用域插槽时，能够将子组件外部的数据传递给父组件，让父组件依据子组件的传递过去的数据决定如何渲染该插槽。

实现原理：当子组件 vm 实例化时，获取到父组件传入的 slot 标签的内容，寄存在 vm.$slot 中，默认插槽为 vm.$slot.default，具名插槽为vm.$slot.xxx，xxx 为插槽名，当组件执行渲染函数时候，遇到 slot 标签，应用$slot 中的内容进行替换，此时能够为插槽传递数据，若存在数据，则可称该插槽为作用域插槽。

Vue 模板渲染的原理是什么？

vue 中的模板 template 无奈被浏览器解析并渲染，因为这不属于浏览器的规范，不是正确的 HTML 语法，所有须要将 template 转化成一个 JavaScript 函数，这样浏览器就能够执行这一个函数并渲染出对应的 HTML 元素，就能够让视图跑起来了，这一个转化的过程，就成为模板编译。

模板编译又分三个阶段，解析 parse，优化 optimize，生成 generate，最终生成可执行函数 render。

• parse 阶段：应用大量的正则表达式对 template 字符串进行解析，将标签、指令、属性等转化为形象语法树 AST。
• optimize 阶段：遍历 AST，找到其中的一些动态节点并进行标记，不便在页面重渲染的时候进行 diff 比拟时，间接跳过这一些动态节点，优化 runtime 的性能。
• generate 阶段：将最终的 AST 转化为 render 函数字符串。

template 预编译是什么？

对于 Vue 组件来说，模板编译只会在组件实例化的时候编译一次，生成渲染函数之后在也不会进行编译。因而，编译对组件的 runtime 是一种性能损耗。

而模板编译的目标仅仅是将 template 转化为render function，这个过程，正好能够在我的项目构建的过程中实现，这样能够让理论组件在 runtime 时间接跳过模板渲染，进而晋升性能，这个在我的项目构建的编译 template 的过程，就是预编译。

那 template 和 jsx 的有什么别离？

对于 runtime 来说，只须要保障组件存在 render 函数即可，而咱们有了预编译之后，咱们只须要保障构建过程中生成 render 函数就能够。

在 webpack 中，咱们应用 vue-loader 编译.vue 文件，外部依赖的 vue-template-compiler 模块，在 webpack 构建过程中，将 template 预编译成 render 函数。

与 react 相似，在增加了 jsx 的语法糖解析器 babel-plugin-transform-vue-jsx 之后，就能够间接手写 render 函数。

所以，template 和 jsx 的都是 render 的一种表现形式，不同的是：

JSX 绝对于 template 而言，具备更高的灵活性，在简单的组件中，更具备劣势，而 template 尽管显得有些僵滞。然而 template 在代码构造上更合乎视图与逻辑拆散的习惯，更简略、更直观、更好保护。

说一下什么是 Virtual DOM

Virtual DOM 是 DOM 节点在 JavaScript 中的一种形象数据结构，之所以须要虚构 DOM，是因为浏览器中操作 DOM 的代价比拟低廉，频繁操作 DOM 会产生性能问题。虚构 DOM 的作用是在每一次响应式数据发生变化引起页面重渲染时，Vue 比照更新前后的虚构 DOM，匹配找出尽可能少的须要更新的实在 DOM，从而达到晋升性能的目标。

介绍一下 Vue 中的 Diff 算法

在新老虚构 DOM 比照时

• 首先，比照节点自身，判断是否为同一节点，如果不为雷同节点，则删除该节点从新创立节点进行替换
• 如果为雷同节点，进行 patchVnode，判断如何对该节点的子节点进行解决，先判断一方有子节点一方没有子节点的状况(如果新的 children 没有子节点，将旧的子节点移除)
• 比拟如果都有子节点，则进行 updateChildren，判断如何对这些新老节点的子节点进行操作（diff 外围）。
• 匹配时，找到雷同的子节点，递归比拟子节点

在 diff 中，只对同层的子节点进行比拟，放弃跨级的节点比拟，使得工夫简单从 O(n^3) 升高值O(n)，也就是说，只有当新旧 children 都为多个子节点时才须要用外围的 Diff 算法进行同层级比拟。

key 属性的作用是什么

在对节点进行 diff 的过程中，判断是否为雷同节点的一个很重要的条件是 key 是否相等，如果是雷同节点，则会尽可能的复用原有的 DOM 节点。所以 key 属性是提供给框架在 diff 的时候应用的，而非开发者。

说说 Vue2.0 和 Vue3.0 有什么区别

1. 重构响应式零碎，应用 Proxy 替换 Object.defineProperty，应用 Proxy 劣势：

   • 可间接监听数组类型的数据变动
   • 监听的指标为对象自身，不须要像 Object.defineProperty 一样遍历每个属性，有肯定的性能晋升
   • 可拦挡 apply、ownKeys、has 等 13 种办法，而 Object.defineProperty 不行
   • 间接实现对象属性的新增 / 删除
2. 新增 Composition API，更好的逻辑复用和代码组织

3. 重构 Virtual DOM

   • 模板编译时的优化，将一些动态节点编译成常量
   • slot 优化，将 slot 编译为 lazy 函数，将 slot 的渲染的决定权交给子组件
   • 模板中内联事件的提取并重用（本来每次渲染都从新生成内联函数）
4. 代码结构调整，更便于 Tree shaking，使得体积更小
5. 应用 Typescript 替换 Flow

为什么要新增 Composition API，它能解决什么问题

Vue2.0 中，随着性能的减少，组件变得越来越简单，越来越难保护，而难以保护的根本原因是 Vue 的 API 设计迫使开发者应用 watch，computed，methods 选项组织代码，而不是理论的业务逻辑。

另外 Vue2.0 短少一种较为简洁的低成本的机制来实现逻辑复用，尽管能够 minxis 实现逻辑复用，然而当 mixin 变多的时候，会使得难以找到对应的 data、computed 或者 method 来源于哪个 mixin，使得类型推断难以进行。

所以 Composition API 的呈现，次要是也是为了解决 Option API 带来的问题，第一个是代码组织问题，Compostion API 能够让开发者依据业务逻辑组织本人的代码，让代码具备更好的可读性和可扩展性，也就是说当下一个开发者接触这一段不是他本人写的代码时，他能够更好的利用代码的组织反推出理论的业务逻辑，或者依据业务逻辑更好的了解代码。

第二个是实现代码的逻辑提取与复用，当然 mixin 也能够实现逻辑提取与复用，然而像后面所说的，多个 mixin 作用在同一个组件时，很难看出 property 是来源于哪个 mixin，起源不分明，另外，多个 mixin 的 property 存在变量命名抵触的危险。而 Composition API 刚好解决了这两个问题。

都说 Composition API 与 React Hook 很像，说说区别

从 React Hook 的实现角度看，React Hook 是依据 useState 调用的程序来确定下一次重渲染时的 state 是来源于哪个 useState，所以呈现了以下限度

• 不能在循环、条件、嵌套函数中调用 Hook
• 必须确保总是在你的 React 函数的顶层调用 Hook
• useEffect、useMemo 等函数必须手动确定依赖关系

而 Composition API 是基于 Vue 的响应式零碎实现的，与 React Hook 的相比

• 申明在 setup 函数内，一次组件实例化只调用一次 setup，而 React Hook 每次重渲染都须要调用 Hook，使得 React 的 GC 比 Vue 更有压力，性能也绝对于 Vue 来说也较慢
• Compositon API 的调用不须要顾虑调用程序，也能够在循环、条件、嵌套函数中应用
• 响应式零碎主动实现了依赖收集，进而组件的局部的性能优化由 Vue 外部本人实现，而 React Hook 须要手动传入依赖，而且必须必须保障依赖的程序，让 useEffect、useMemo 等函数正确的捕捉依赖变量，否则会因为依赖不正确使得组件性能降落。

尽管 Compositon API 看起来比 React Hook 好用，然而其设计思维也是借鉴 React Hook 的。

SSR 有理解吗？原理是什么？

在客户端申请服务器的时候，服务器到数据库中获取到相干的数据，并且在服务器外部将 Vue 组件渲染成 HTML，并且将数据、HTML 一并返回给客户端，这个在服务器将数据和组件转化为 HTML 的过程，叫做服务端渲染 SSR。

而当客户端拿到服务器渲染的 HTML 和数据之后，因为数据曾经有了，客户端不须要再一次申请数据，而只须要将数据同步到组件或者 Vuex 外部即可。除了数据意外，HTML 也构造曾经有了，客户端在渲染组件的时候，也只须要将 HTML 的 DOM 节点映射到 Virtual DOM 即可，不须要从新创立 DOM 节点，这个将数据和 HTML 同步的过程，又叫做客户端激活。

应用 SSR 的益处：

• 有利于 SEO：其实就是有利于爬虫来爬你的页面，因为局部页面爬虫是不反对执行 JavaScript 的，这种不反对执行 JavaScript 的爬虫抓取到的非 SSR 的页面会是一个空的 HTML 页面，而有了 SSR 当前，这些爬虫就能够获取到残缺的 HTML 构造的数据，进而收录到搜索引擎中。
• 白屏工夫更短：绝对于客户端渲染，服务端渲染在浏览器申请 URL 之后曾经失去了一个带有数据的 HTML 文本，浏览器只须要解析 HTML，间接构建 DOM 树就能够。而客户端渲染，须要先失去一个空的 HTML 页面，这个时候页面曾经进入白屏，之后还须要通过加载并执行 JavaScript、申请后端服务器获取数据、JavaScript 渲染页面几个过程才能够看到最初的页面。特地是在简单利用中，因为须要加载 JavaScript 脚本，越是简单的利用，须要加载的 JavaScript 脚本就越多、越大，这会导致利用的首屏加载工夫十分长，进而升高了体验感。

更多详情查看彻底了解服务端渲染 – SSR 原理

完结

面试官点了拍板，嗯呢，这小伙还能够，懂得还挺多，能够弄进来写业务。

我也暗自窃喜，幸好没问到我不会的，而后我坐那傻笑，笑着笑着，忽然听到我的闹铃响了，而后，我梦醒了。

而后，新的搬砖的一天又开始了。

参考文献

• 「面试题」20+Vue 面试题整顿
• 面试官：聊聊对 Vue.js 框架的了解