关于Vue的一些常见面试题，有啥错的或者是有待补充的欢迎留言

谈一下对MVVM原理的理解

View View Model Model

Dom JS JSON数据等

响应式原理

理解

核心点

Object.defineProperty

原理

对象情况

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QAA6xhoe-1595380246074)(C:\Users\dell\Desktop\响应式数据原理.png)]

this.walk()会把非数组元素循环，如果还是个对象，就会递归观测

Observer只会观测对象，基本数据类型不观测

数组情况

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vnhNtUo5-1595380246079)(C:\Users\dell\Desktop\数组响应式原理.png)]

Vue中定义的⑦种响应式数组方法

在core-instance-array.js文件中定义了

push pop shift unshift splice sort reserve

数组里对象才会触发Observers，也就是说才会响应式变化

arr = [{a:1},2];
arr[0].a=100;			//这样子可以
arr[1] = 100;			//	× 

为何Vue采用异步渲染

理由：Vue是组件级更新，防止改变数据就更新

原理：

dep.notify(通知watcher进行更新操作) => subs[i].updata() (依次调用watcher的updata) => queueWatcher (将watcher重新放到队列中) => nextTick(flushSchdulerQueue) (异步清空watcher队列)

nextTick实现原理 ======> 异步方法

nextTick主要是使用了宏任务和微任务，定义了一个异步方法

作用：

$nextTick函数的作用就是在页面元素重新渲染之后才会执行内部代码

原理：

1.flushcallbacks（调用promise异步）: 多个nextTick中传递的回调函数依次执行

2.MutationObserver

3.setImmediate

Vue中Computed特点

Computed和watch原理都是watcher

computed 具有缓存

原理：

initcomputed（初始化）=> new watcher (lazy:true默认，所以watcher默认不执行，dirty：true) =》 defineComputed（将属性定义到实例上） =》 createComputedgetter（创建getter当取值时会执行此方法）=》当用户取值时 （dirty为false是返回上一次计算结果）else（当dirty为true是） =》watcher.evalute(计算结果，会进行依赖收集，然后把dirty=true)

watch中的deep：true是如何实现的

原理：通过递归，性能不高

在computed中这种情况用JSON.Stringify

Vue组件的生命周期

待补充

Ajax请求放在哪个生命周期中

理解

在create的时候，视图中的dom并没有渲染出来，所以此时不能直接去操作Dom节点，

在mounted的时候，由于已经渲染视图，可直接操作Dom节点

一般情况下统一放在mounted中

，服务器渲染（SSR）不支持mounted方法

何时使用beforeDestroy

理解

• 在页面中使用$on方法的时候，需要在组件摧毁前解绑
• 清楚自定义的定时器
• 清楚事件绑定的scroll,mousemove…

Vue中模板编译原理

1.将template转化为AST语法树

2.通过codegen代码生成转化为render函数

3.内部调用_e等方法，转化为虚拟Dom

Vue中的v-if和v-show的区别

v-if是操作dom，v-show是作用在display

为什么v-for和v-if不能连用

v-for的优先级高于v-if

用VNode来描述一个Dom结构

待补充

diff时间复杂度O(n)

简述diff算法原理

new old

开头 和 开头 比

结尾 和 结尾 比

开头 和 结尾 比

结尾 和 开头 比

详细见图

待补充

v-for为什么要绑定:key值

相同标签会复用，不要用索引做key值

描述组件渲染和更新过程

理解

渲染组件时，会通过Vue.extend()方法构建子组件的构造函数，并进行实例化，最终手动调用$mount()方法

进行挂载，更新组件时会进行patchVnode流程，核心就是diff算法

在动态组件中使用keep-alive

会保存你之前原有的视图

异步组件的存在

通过promise，‘my-component’: () => import(’./my-async-component’)