欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-09 20:44:17
...

谈一下对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’)