每天10个vue面试题(三)

1. $nextTick原理？

• Vue 的 nextTick 其本质是对 JavaScript 执行原理 EventLoop 的一种应用
• nextTick 的核心是利用了 Promise 、MutationObserver、setImmediate、setTimeout的原生 JavaScript 方法来模拟对应的微/宏任务的实现
• 本质是为了利用 JavaScript 的这些异步回调任务队列来实现 Vue 框架中自己的异步回调队列。

---

2. $nextTick使用场景？

• 在数据变化后执行的某个操作，而这个操作需要使用随数据变化而变化的DOM结构的时候，这个操作就需要方法在nextTick()的回调函数中。
• 在vue生命周期中，如果在created()钩子进行DOM操作，也一定要放在nextTick()的回调函数中

---

3. Vue 如何给 data 中的对象属性添加一个新的属性？

• 使用全局api：$set()方法
• 传参分别是：this.$set(要改变的数组/对象，你要改变的位置/key，你要改成的值)

---

4. $set原理？

• 如果目标是数组，直接使用数组的 splice 方法触发响应式；
• 如果目标是对象，先判断属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处理，则是通过调用 defineReactive 方法进行响应式处理（ defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法)

---

5. Vue中封装的数组方法有哪些，其如何实现页面更新？

• 数组方法有：push、pop、shift、unshift、splice、sort、reverse
• 如何更新：重写了数组中的那些原生方法，首先获取到这个数组的__ob__，也就是它的Observer对象，如果有新的值，就调用observeArray继续对新的值观察变化（也就是通过target__proto__ == arrayMethods来改变了数组实例的型），然后手动调用notify，通知渲染watcher，执行update。      

---

6. Vue 单页应用与多页应用的区别？

• SPA单页面应用（SinglePage Web Application），指只有一个主页面的应用，一开始只需要加载一次js、css等相关资源。所有内容都包含在主页面，对每一个功能模块组件化。单页应用跳转，就是切换相关组件，仅仅刷新局部资源。
• MPA多页面应用 （MultiPage Application），指有多个独立页面的应用，每个页面必须重复加载js、css等相关资源。多页应用跳转，需要整页资源刷新

---

7. Vue data 中某一个属性的值发生改变后，视图会立即同步执行重新渲染吗？

• 不会立即同步执行重新渲染。Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化， Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。
• 如果同一个watcher被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环tick中，Vue 刷新队列并执行实际（已去重的）工作。

---

8. Vue从template(模板)到render(渲染)的过程（Vue编译器工作原理）？

• Vue中有个独特的编译器模块，称为"compiler"，它的主要作用是将用户编写的template编译为js中可执行的render函数；
• 之所以需要这个编译过程是为了便于前端程序员能高效的编写视图模板；相比而言，我们还是更愿意用HTML来编写视图，直观且高效。手写render函数不仅效率底下，而且失去了编译期的优化能力，因此compiler的过程是必须的；
• 在Vue中编译器会先对template进行解析，这一步称为parse，结束之后会得到一个JS对象，我们成为抽象语法树AST，然后是对AST进行深加工的转换过程，这一步称为transform，最后将前面得到的AST生成（generate）JS代码，也就是render函数；

---

9. Vue中编译器的执行时刻？

• 根据引入Vue的运行时不同，编译器的执行时刻是不同的：
• 如果使用webpack环境，即Vue的预打包环境，这时webpack的vue-loader会提前将模板进行编译，
• 这时编译器的执行时刻就是在打包阶段，即预编译；
• 如果是非运行时版本，即携带编译器的版本，
• 这时编译器就会在运行时工作：发现一个组件有模板没有渲染函数，就会去编译模板，将其转换为渲染函数，也就是发生在组件的创建阶段。

---

10. React中有没有编译器？

• react中又jsx，这不是编译器，可以理解为一种语法糖，语言本身没有变化，通过babel-loader将jsx变为js，因此react是没有编译器的。