key 作用
key作为vue对比算法的标识，在数据修改后，可以通过key标识进行虚拟dom对比，从而决定节点的重新加载和服用 2.使用index作为key 用index等于没写key，在v-for列表中不管顺序怎么颠倒，下标顺序不变，这样排列会导致节点复用错误，增加性能消耗， 如果结构内有输入的dom还会显示错误，例如input
nextTick 原理
作用: nextTick用于下次Dom更新循环结束之后执行延迟回调,在修改数据之后使用nextTick,可以在回调中获取更新后的DOM。
实现原理: nextTick方法主要是使用了宏任务（setImmediate、setTimeout）和微任务（promise、MutationObserver）,定义了一个异步方法,多次调用nextTick会将方法存入队列中,通过这个异步方法清空队列。
具体实现：
- 先定义了一个callbacks存放所有的nextTick里的回调函数
- 然后判断一下当前的浏览器内核是否支持Promise，支持就用Promise来触发回调函数
- 如果不支持Promise，再判断是否支持MutationObserver（一个可以监听DOM结构变化的接口，观察文本节点发生变化时，触发执行所有回调函数）
- 如果不支持MutationObserver，再判断是否支持setImmediate
- 如果以上都不支持就只能用setTimeout来完成异步执行了 每次event loop的最后,会有一个UI render,也就是更新DOM 只要让nextTick里的代码放在UI render步骤后面执行,就能访问问到更新后的DOM了。
延迟调用优先级如下：Promise > MutationObserver > setImmediate > setTimeout（因为浏览器和移动端兼容问题降级处理）
应用场景: 需要在视图更新之后,基于新的视图进行操作。
微任务(microtask)和宏任务(macrotask)： microtask有:Promise、MutationObserver,以及nodejs中的process.nextTick macrotask有:setTimeout,setlnterval,setlmmediate,I/O, UI rendering
vue 父子组件的生命周期顺序
一、加载渲染过程 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted 二、子组件更新过程 父beforeUpdate->子beforeUpdate->子updated->父updated 三、父组件更新过程 父beforeUpdate->父updated 四、销毁过程 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
Vue3 和vue2区别
1.检测机制的改变 vue3采用es6的proxy api对数据代理，监听的是整个对象，而不再是某个属性，消除了vue2基于object.defineProperty的实现所存在的很多问题 vue3可以监听对象属性的添加和删除，
可以监听数组的变化 vue3支持map、set、weakMap、weakSet
2.支持碎片 fragments Vue2必须要有根节点 Vue3可以拥有多个根节点
3.api方式不同 vue2是采用选项式api，vue3使用组合式api 选项式api是组件的相关逻辑拆分出不同的选项，例如props、data、methods等，而组合式api更加灵活可以在一起 组合式api通过vue3的setup选项进行使用，该选项会在组件创建之前执行，有两个参数props、content，return的所有内容都会暴漏给组件的其余部分 生命周期api基本相同composition api需要加上on 因为setup是封闭的，ref获取需要 defineExpose编译宏来暴漏出来
4.数据建立不同 Vue2是在data里面建立数据 Vue3是是使用setup方法中，此方法是组件在创建之前初始化构造时候触发 Vue3通过ref建立简单类型和reactive()建立复杂的数据，setup返回我们的响应式数据，从template模版中可以获取返回的数据
5.生命周期不同
ref 与 reactive区别：
| 特性 | ref | reactive |
|---|---|---|
| 数据类型 | 用于基本数据类型（数字、字符串、布尔值等）和对象 | 用于对象、数组等复杂类型 |
| 修改方式 | 通过 .value 访问和修改数据 | 直接访问和修改对象的属性 |
| 响应性范围 | 只能响应单一的值（基本类型、对象/数组的引用） | 创建深度响应式对象，自动响应对象内嵌的属性 |
| 适用场景 | 基本数据类型、DOM 引用、对象引用（简易情况） | 对象和数组的深度响应式处理 |
Vue3 与 Vue2：深入对比与源码解析
zhuanlan.zhihu.com/p/266897739...
vue3和vue2算法比较
vue3原理
Vue 3是目前比较流行和使用的一种现代化JavaScript框架，其源码分析对于加深对前端框架的理解和开发能力有很大帮助。Vue 3源码主要由以下几个模块组成：
Compiler模块：解析Vue模板，将其转换为渲染函数。 Renderer模块：将组件渲染为真实的DOM元素。 Reactivity模块：实现了响应式数据绑定。 Runtime-core模块：实现了Vue组件的实例化、生命周期、事件等核心功能。 Shared模块：包含了一些公共的工具函数。