互联网寒冬的来袭,如何在面试之前更高效的做好面试准备,是程序员共同关注的问题。
现在面试门槛越来越高,很多开发者对于 Vue 底层的一些知识了解的不是很多,遇到这些面试题会手足无措。
在本文中,会结合面试过程中的一些问题带你剖析 Vue.js 内部的整个流程,总共分为四个模块:
作者:日常君
链接:https://www.jianshu.com/p/b62d282a0845
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
-
响应式原理以及依赖收集
-
异步更新策略及 nextTick 原理
-
虚拟(Virtual )DOM 和 Diff 算法
-
数据状态管理 Vuex 工作原理
响应式原理以及依赖收集
这一章节应该是在 Vue 面试中出现频率最多,也是面试官最喜欢问的一个话题,当然在实际面试中不会直接问你什么是 Vue 的响应式原理以及依赖收集,这里列举了一些可能会出现的问题: -
Vue 是如何实现双向绑定的,什么是 MVVM?
-
你了解过 Object.defineProperty 这个 API 吗,和 Proxy 有啥区别?
-
Vue 是如何深度监听并且对数组进行监听?
-
Vue 的依赖收集是做啥的,实现的过程有哪些?
面对这类问题,可谓万变不离其宗。考察的重点当然也是对 Vue 响应式原理的理解。用下面这句话来概括何为响应式:
当一个状态改变之后,与这个状态相关的事务也立即随之改变,
从前端来看就是数据状态改变后相关 DOM 也随之改变。
要做到这一点,Vue 借助 Object.defineProperty() 这个 api 去实现,用它来对数据进行劫持操作。在我们访问或者修改某个对象的某个属性的时候,通过一段代码进行拦截,然后再进行额外的操作,返回结果。Vue3 改为 Proxy()后文会在详细讲解,这里我们的关注点是 Object.defineProperty()。在 MDN 中它是这样定义的:
Object.defineProperty(obj, prop, descriptor)
- obj:要定义属性的对象;
- prop:要定义或修改的属性名称;
- descriptor:要定义或修改的属性描述符。