总结:Vue面试题

ChrisMou
392 阅读6分钟

「2022 年什么会火？什么该学？本文正在参与“聊聊 2022 技术趋势”征文活动 」

Vue生命周期

created钩子函数 data,methods都已经初始化好了组件还没有被挂载,如果要调用methods中的方法 或者操作data中的数据 最早在created钩子中进行数据响应式处理之后可以在此生命周期中挂载不想变成响应式的数据 但可以在组件实例中共享这个数据对象

执行beforemount钩子函数 执行解析完之后的render函数 开始创建 vdom

最后执行mounted钩子 并将vdom渲染为真实dom , 如果要通过某些插件操作页面上的dom节点 最早要在mounted中进行且更新完状态之后异步更新dom

updated 当组件数据更新后会调用

keep-alive 独有的生命周期 分别为 actived 和 deactived 用keep-alive包裹的组件再切换时不会进行销毁 , 而是缓存到内存中并执行 deactived函数

激活会执行actived钩子函数

销毁的钩子函数 beforedestory 和 destoryed

beforedestory 适合移除事件 ,定时器 等等 如果有子组件的话 递归销毁子组件

所有组件都销毁完毕后 才执行根组件的destory的钩子函数

  • created 属性已经绑定 ,但还未生成真实dom

  • 进行元素挂载 $el / vm.$mount()

  • 是否有template解析成render function

  • *.vue文件 vue-loader 会将template编译成 render function

  • beforeMount 模板编译/挂载之前

  • 执行render function ,生成真实dom 并替换到dom tree 中

  • mounted 组件已经挂载

  • update 执行 diff算法对比改变是否需要触发更新

  • destory销毁自身且递归销毁组件以及事件监听

    • remove() 删除节点
    • watcher.teardown() 清空依赖
    • vm.$off() 解绑监听

  • destoryed 完成后触发钩子

nextTick的实现原理

nextTick 可以让我们在下次dom更新循环结束之后执行延迟回调,用于获得更新后的dom

nextTick 主要使用了 宏任务和微任务 根据执行环境分别尝试采用

Promise

MutationObserver

setImmediate

以上都不行采用setTimeout

定义一个异步方法 多次调用nextTick会将方法存入队列中,通过这个异步方法清空当前队列

Vue响应式原理与Render函数

Vue的响应式原理核心是通过es5的保护对象的Object.definedProperty 中的访问器属性中的get和set方法,data中声明的属性 都会添加访问器属性 compile解析模板指令 将指令模板变量替换成数据初始化渲染视图，并将每个指令对应的节点绑定更新函数，添加数据的订阅者，数据有变动就会通知 更新视图 此时组件并不会重新渲染 而是转化为虚拟dom vue框架会对比新旧虚拟dom对比新旧差异 并将不同的虚拟dom转为真实dom

template模板转化为 Render函数 生成虚拟dom

数据变了 ,视图(真实dom)就会跟着变

render() + 初始数据 ==> 初始虚拟dom==

render() + 新数据 ==> 新的虚拟dom==

对比两个虚拟dom区别 —-> 更新真实dom

响应式: 数据变化会去执行render

数据变化会自动调用一次render()函数 ,会产生 一个新的虚拟dom 把这个新的虚拟dom与初始dom比较,把发生变动的虚拟dom转化为真实dom

MVVM 与 MVC 的区别

MVC 是模型 - 视图 - 控制器 的简称 模型指的是后端传递过来的数据 ,视图是用户看到的页面 控制器是后端处理业务逻辑层 通过 controller 到 model层取数据 传递给 view层 渲染显示 mvc是单向的

MVVM是 模型 - 视图 - 视图模型 视图模型是用来连接 m层 和 v 层的 他有两个方向

  • 1.将模型 转化 为视图 ,将后端传递的数据转化成页面的数据 实现的方式 数据绑定

  • 2.将视图转化为模型 将页面的数据 转化为 后端接收的数据 实现的方式 DOM事件监听

    从两个方向实现的数据绑定(数据的双向绑定)

    MVVM模式简化了界面与业务的依赖,解决了数据频繁更新

Vue实现数据双向绑定原理

-   *vue实现数据双向绑定主要是 :采用数据劫持结合发布订阅模式的方式通过Object.defineProperty()来劫持各个属性的getter/setter在数据变动时发布消息给订阅者,触发相应的回调*

  • vue的数据的双向绑定 将MVVM作为数据绑定的入口 ,整合 Observer,Compile , Watcher.通过Observer来监听自己的model的数据变化 通过Compile来解析编译模板指令 利用Watcher作为 observer 和 compile 的 桥

    Object.defineProperty() 来转化属性对象 添加构造器属性setter/getter 并添加一个watcher

    compile模板解析完之后将视图渲染出来 订阅数据变化 绑定更新函数

    当Observer监听的对象的属性变了以后会通知watcher watcher触发更新函数 更新 视图

Virtual Dom 的优势在哪里

Dom引擎 , js引擎 相互独立 但又工作在统一线程(主线程), JS代码调用DOM api 必须挂起,JS引擎转换传入参数数据 ,激活DOM引擎 ,DOM重绘后在转换可能有的返回值 最后激活JS引擎并继续执行 若频繁调用DOM api 重新计算布局 ,重新绘制 图像 会引起 ,更大的性能消耗

其次是 VDOM 和真实DOM的对比

  1. 虚拟dom 不会立马进行排版操作
  2. 虚拟dom进行频繁修改 然后一次性比较并修改真实dom中需要改的部分 最后在真实dom中进行排版与重绘 减少过多DOM节点排版与重绘性能损耗
  3. 虚拟dom有效降低大面积真实DOM的重绘与排版 因为最终与真实dom比较差异,可以只渲染局部

Watch , Computed ,Methods的区别

执行顺序: Computed 是 dom加载完成之后立即马上执行的

methods 是 需要调用才能执行(默认加载的时候不执行)

watcher 用于观察Vue实例上的变动(最后执行)

Computed: 具有缓存性 computed执行完getter之后会缓存数据, 如果数据改变 下一次调用computed获取下一次的值时重新执行getter方法计算*(如果数据变化的时候才会重新计算,数据没有变的时候,会从缓存中读取)* 适合 消耗性能的计算场景

Watch:监听某个属性的变化 , 当值变化时会触发watch的回调函数 无缓存

Methods:只要把方法用到了模板上 , 每一次变化会重新渲染视图 性能开销大

avatar
文章
阅读
粉丝