关于vue.js:一次关于vue的自我测试

1. 讲一讲 mvvm 框架

mvvm 是 model-view-viewmodel 的缩写. 也就是把 mvc 中的 Controller 演变成了 viewmodel.
Model 层代表数据模型, View 层代表 ui 组件, viewModel 是 view 和 model 层的桥梁, 数据绑定到 viewmodel 层并主动将数据渲染到 view 上, 视图扭转时候会告诉 viewmodel 层更新数据

2. 介绍下 vue 响应式零碎

vue 会对应用 Object.defineProperty 对 data 的 getter/setter 办法进行拦挡, 联合公布订阅模式, 在 getter 中进行订阅, 在 setter 中进行公布告诉, 让所有订阅者实现响应

3. 那你晓得 vue3.0 响应式数据原理么

vue3 改用 proxy 代替 Object.defineProperty. 因为 proxy 能够间接监听对象和数组的变动.

4. computed 与 watch 的区别

计算属性 computed 和监听器 watch 都能够察看属性的变动而做出响应
不同点:
Computed实质是一个具备缓存的 watcher，依赖的属性发生变化就会更新视图。实用于计算比拟耗费性能的计算场景。当表达式过于简单时，在模板中放入过多逻辑会让模板难以保护，能够将简单的逻辑放入计算属性中解决。
Watch没有缓存性，更多的是察看的作用，能够监听某些数据执行回调。当咱们须要深度监听对象中的属性时，能够关上 deep：true 选项，这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的话能够应用 字符串模式 监听，如果没有写到组件中，不要遗记应用 unWatch 手动登记 哦

5. 介绍下 vue 的生命周期

beforeCreate
是 new Vue()之后触发的一个钩子, 在以后阶段 data, methods computed 以及 watch 上的数据和办法都不能拜访
created
在实例创立实现后产生. 以后阶段曾经实现了数据观你测, 也就是能够应用数据, 更改数据, 在这里更改数据不会触发 updated 函数, 能够做一些初始数据获取, 在以后阶段无奈和 dom 进行交互
beforeMount
产生在挂载之前, 在这之前 template 模板已导入渲染函数编译, 而以后阶段虚构 dom 曾经创立实现, 行将开始渲染, 在此时也能够对数据进行批改
mounted
在挂载实现后产生, 在以后阶段, 实在的 dom 挂载实现, 数据实现双向绑定, 能够拜访到 dom 节点
beforeUpdate
产生在更新之前, 也就是响应式数据产生更新, 虚构 dom 从新渲染前被触发
updated
产生在更新实现之后, 以后阶段组件 dom 已实现更新
beforeDestory
产生在实例销毁之前, 在以后阶段实例齐全能够被应用, 咱们能够在这里做善后收尾工作, 比方革除定时器
destroyed
产生在数据实例销毁之后, 这个时候只剩下 dom 空壳, 组件已被拆解, 数据绑定解除, 监听移除,

6. 组件之间怎么通信

父子组件通信

父组件 > 子组件 prop
子组件 > 父组件 $emit
获取组件实例
应用$parent/$childred $refs.xxx

兄弟组件通信

event bus
vuex

跨组件通信

provide/inject
event bus
vuex

7. Vue 事件绑定原理说一下

组件事件绑定: 每一个 vue 实例都是一个 event bus, 当子组件被创立的时候, 父组件将事件传递给子组件, 子组件初始化的时候是有 $on 办法将事件注册到外部, 须要的时候应用 $emit 触发函数

而对于原生 native 事件, 应用 addEventListener 绑定到实在的 dom 上

8. vue 模板渲染的原理是什么

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

模板编译又分为三个阶段, 解析 parse 优化 optimize 生成 generate, 最终生成可执行函数 render
parse 阶段: 应用大量的正则表达式对 template 字符串进行解析, 将标签 指令 属性等转化为形象语法树 AST
optimise 阶段: 遍历 AST, 找到其中的一些动态节点并进行标记, 不便在页面重渲染的时候进行 diff 比拟时, 间接跳过这一些动态节点.
generate 阶段: 将最终的 AST 转化为 render 函数字符串

9. template 预编译是什么

对于 vue 组件来说, 模板编译只会在组件实例化的时候编译一次, 生成渲染函数后再也不会进行编译,
而模板编译的目标也不仅仅是将 template 转化为 render function
这个过程, 正好能够在我的项目构建的过程中实现, 这样能够让理论组件在 runtime 时间接跳过模板渲染, 进而晋升性能, 这个在我的项目构建的编译 template 的过程, 就是预编译

10. template 和 jsx 有什么区别

对于 runtime 来说, 只须要保障组件存在 render 函数即可, 而咱们有了预编译之后, 咱们只须要保障构建过程中生成 render 函数就能够
在 webpack 中, 咱们是要 vue-loader 编译.vue 文件, 外部依赖的 vue-template-compiler 模块, 在 webpack 构建过程中, 将 template 预编译成 render 函数
JSX 绝对于 template 而言，具备更高的灵活性，在简单的组件中，更具备劣势，而 template 尽管显得有些僵滞。然而 template 在代码构造上更合乎视图与逻辑拆散的习惯，更简略、更直观、更好保护。

11. 说下什么是 virtual dom

virtual dom 是 dom 节在 javascript 中的一种形象数据结构, 之所以须要虚构 dom. 是因为浏览器中操作 dom 的代价比拟低廉, 频繁的操作 dom 会产生性能问题, 虚构 dom 的作用是在每一次响应式数据发生变化引起页面重渲染时,vue 比照更新前后的虚构 dom, 匹配找出尽可能少的须要更新的实在 dom, 从而进步性能的目标

12 介绍下 vue 中的 diff 算法

13 key 属性的作用

在对节点进行 diff 的过程中, 判断是否为雷同节点的一个很重要的条件是 key 是否相等, 如果是雷同节点, 则会尽可能的复用原有的 dom 节点,

14. 说说 vue2.0 和 3.0 的区别

1. 重构响应式零碎 应用 proxy 替换 object.defineProperty, 应用 proxy 劣势:

• 可间接监听数组类型的数据变动
• 监听的指标为对象, 不须要像 object.defineProperty 一样遍历每个属性, 有肯定的性能晋升
• 可拦挡 apply ownKeys has 等 13 种办法,
• 间接实现对象属性的新增 / 删除

1. 新增 composition Api 更好的逻辑复用和代码组织
2. 重构 virtual Dom

• 模板编译是的优化, 将一些动态节点编译成常量
• slot 优化, 将 slot 编译为 lazy 函数, 将 slot 的渲染的决定权交给子组件

1. 代码结构调整, 体积更小
2. 应用 typescript 替换 flow

15. 为什么要新增 composition Api

在 vue2.0 中, 随着性能的减少, 组件变得越来越简单, 越来越难保护, 而难以保护的根本原因是 vue 的 api 设计迫使开发者应用 watch computed methods 选项组织代码, 而不是理论业务逻辑
另外 vue2 短少一种较为简洁的低成本的机制来实现逻辑复用, 尽管能够 minxis 实现逻辑复用, 然而当 mixin 变多的时候, 会使得难以找到对应的 data computed 或者 method 来源于那个 mixin,
所以 CompositionAPI 的呈现, 次要也是解决 option API 带来的问题,
第一个就是代码组织的问题,composition API 能够让开发者依据业务逻辑组织本人的代码, 让代码具备更好的可读性和可扩展性
第二个就是实现代码的逻辑提取和复用,

16. 都说 compositionApi 与 react hook 很像, 说说区别

composition API 是基于 vue 的响应式零碎实现的,
申明在 setup 函数内, 一次组件实例化只调用一次 setup, 而 React Hook 每次重渲染都须要调用 hook, 使得 react 性能绝对于 vue 比较慢
compostion API 的调用不须要顾虑调用程序, 也能够在循环 条件 嵌套函数中应用
响应式零碎主动实现了依赖收集, 进而组件的局部的性能优化由 vue 外部本人实现,

17.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 脚本就越多、越大，这会导致利用的首屏加载工夫十分长，进而升高了体验感。

借鉴网址
vue20 道面试
https://juejin.im/post/684490…
聊聊对 vue.js 框架的了解
https://github.com/yacan8/blo…
尤大大总结
https://juejin.im/post/684490…