关于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’)
上一篇: Java SE集合Map
下一篇: Java SE(注解与反射)