个人前端技术要点汇总

vue知识点

谈谈对vue数据双向绑定的理解

vue2：主要是通过数聚劫持以及发布订阅模式实现的，通过object.defineProperty方法将所有属性添加getter与setter。get里会做依赖收集，set里会做数据更新。 缺点：只能检测最外层属性，如果是多层的就要全量递归。 vue3：通过proxy代理数据，完成更新。

vue如何检测数组变化

vue2：没有进行defineProperty而是重写的数组的七个方法。

• push
• shift
• pop
• splice
• unshift
• sort
• reverse

所以数组索引和长度vue2无法检测到

vue中如何进行依赖收集

如何理解vue中的模板编译原理

vue生命周期作用

• beforeCreate 在实例初始化之后，数据观测observer 和event、watcher事件配置之前被调用

• created 实例已经创建完成，在这一步，以下配置被完成

  • 数据观测
  • 属性和方法的运算
  • watch/event时间回调
  • $el尚未生成

• beforeMount 在挂载之前被调用，render尚未被调用

• mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用

• beforeUpdate 数据更新时，被调用，发生在虚拟Dom重新渲染和打补丁之前

• update 由于数据更改导致的虚拟Dom重新渲染和打补丁，在这之后调用

• beforeDestroy 实例销毁之前调用

• destroyed 实例销毁之后调用，调用后Vue实例的所有东西都会被解绑，所有的事件监听会被移除，子实例被销毁，该钩子在服务端渲染期间不被调用

vue中mixin的使用原理

抽离公共逻辑时使用。组件初始化时候会调用mergeOptions方法进行合并，采用策略模式对不同的属性进行合并，命名有冲突采用本身数据 缺点：数据来源不清晰。

vue组件data为什么函数形式

防止数据污染，如果是对象会指向同一个地址。函数的话产生闭包分开为各自的空间。

说明nextTick原理

nextTick是一个微任务，他是在下一次dom更新循环之后执行的延迟回调 vue数据更新是异步的使用它可以保证在更新之后执行

computed和watch的区别

都是根据watcher实现的 computed是具有缓存性的，依赖的值不会发生变化，对其取值时也不会重复执行。 watch会监听数值的变化，每当改变时就会调用函数

vue为什么使用虚拟dom

虚拟dom就是用js对象看来模拟dom。 直接操作真实dom效率低，js对象模拟的虚拟dom可以通过diff算法进行差异化更新。

vue中diff算法的原理

JS知识点

call apply bind

function.call(fuc,...args) function.apply(fuc,[arg1,arg2]) let newfuc = function.bind(fuc,...args) 不改变原函数的this指向

宏任务微任务

宏任务 (Macrotasks)

• setTimeout 和 setInterval: 用于延迟执行代码或定期执行代码。
• setImmediate (Node.js 环境): 在当前事件循环迭代结束时立即执行回调。
• I/O 操作: 包括文件读写、网络请求等。
• UI渲染 (浏览器环境): 浏览器在执行完宏任务后，如果需要，会更新页面的视图。
• process.nextTick (Node.js 环境): 尽管在Node.js环境中process.nextTick看起来像微任务，但它实际上是在当前操作完成后、但在事件循环继续之前执行的，因此可以被视为一种特殊的宏任务。

微任务 (Microtasks)

• Promise: 当Promise的状态改变时（resolve或reject），相应的.then或.catch回调会被添加到微任务队列中。
• MutationObserver: 用于监视DOM树的变化，并在变化发生时执行回调函数。
• queueMicrotask: 一个原生API，允许你直接向微任务队列中添加一个回调函数。
• async/await: async函数内部的.then和.catch方法也是基于Promise实现的，因此它们也会产生微任务。

在浏览器中，事件循环的流程如下：

1. 执行当前的同步任务（即当前脚本中的代码）。
2. 执行微任务队列中的所有任务。
3. 渲染更新（例如重新绘制页面，浏览器会在这一阶段进行优化，尽量减少多次渲染）。
4. 执行宏任务队列中的任务。
5. 重复上述步骤，直到队列为空。