Vue 重点回顾

生命周期

生命周期 (vue2)	说明	备注
beforeCreate	new Vue()之后触发的第一个钩子，在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。	未完成双向绑定，这里应该是只分配了内存空间，没有初始化。数据和方法并没有进入到Vue框架中
created	在实例创建完成后，已经完成了数据观测，可以使用数据，更改数据，，在这里更改数据不会触发updated函数(不会触发DOM的rander变化)。可以做一些初始数据的获取，在当前阶段无法与Dom进行交互，如果非要想，可以通过vm.$nextTick来访问Dom	未完成双向绑定，初始化完成，并添加到Vue框架,未完成双向绑定，暂时无法和DOM交互
beforeMount	发生在挂载之前，在这之前template模板已导入渲染函数编译。而当前阶段虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated。	未完成双向绑定，还是无法和DOM的rander交互
mounted	在挂载完成后发生，在当前阶段，真实的Dom挂载完毕，数据完成双向绑定，可以访问到Dom节点，使用$refs属性对Dom进行操作	完成双向绑定，可以和DOM交互
beforeUpdate	发生在更新之前，也就是响应式数据发生更新，虚拟dom重新渲染之前被触发，可以在当前阶段进行更改数据，不会造成重渲染。	完成双向绑定，不再创建周期，作为数据修改的监听循环
updated	发生在更新完成之后，当前阶段组件Dom已完成更新。避免在此期间更改数据，可能会导致无限循环的更新。	完成双向绑定，不再创建周期，作为数据修改的监听循环
beforeDestroy	发生在实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器。	销毁周期
destroyed	发生在实例销毁之后，这个时候只剩下了dom空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。	销毁周期
Vue3	----	----
setup	组合式 API 入口，替代 Vue2 的 beforeCreate 和 created	创建阶段
created	数据观测和事件初始化完成	创建阶段
beforeMount	模板编译完成，DOM 未渲染	挂载阶段
mounted	组件已挂载到 DOM，可安全操作 DOM	挂载阶段（初始化第三方库）
beforeUpdate	数据变化后，DOM 更新前触发	更新阶段（请使用watch、watchEffect函数代替）
updated	DOM 更新完成后调用	更新阶段
beforeUnmount	组件卸载前，清理资源如定时器	销毁阶段(移除事件监听器)
errorCaptured	捕获后代组件错误	错误处理 (统一捕获异常)
onActivated / onDeactivated	组件激活/停用时触发	keep-alive 相关

vue2 和 Vue3 的一些差异

----	Vue2	Vue3	备注
代理方式	使用Object.defineProperty重新定义data中的所有属性，当页面使用对应属性时，首先会进行依赖收集(收集当前组件的watcher)如果属性发生变化会通知相关依赖进行更新操作(发布订阅)。	改用Proxy（ES6 特性）替代Object.defineProperty。因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化	Vue3已经在Es6中有接口支持
是否支持 Composition API	否（Options Api）	是	这里需要辩证看问题，复杂的单页（Options Api）代码整洁很多
响应式系统提升	1、Object.defineProperty不能对Object新增属性<Vue.set(obj, key, value)>，数组<Vue.set(arr, index, value)>监听，需要触发 2、初始化递归遍历：深度遍历对象所有属性并逐个绑定 getter/setter，大型对象初始化性能较差 3、嵌套对象处理：若属性值是对象，需递归处理，进一步增加性能开销	响应式数据原理改成proxy，可监听动态新增删除属性，以及数组变化	Vue3的Proxy对复杂对象监听更容易
编译优化	标记静态根节点优化diff	标记和提升所有静态根节点，diff的时候只需要对比动态节点内容
生命周期
状态管理	Vuex	使用pina
Route	vue2通过this获取router实例	vue3通过使用 getCurrentInstance/ userRoute和userRouter方法获取当前组件实例
props	vue2 通过 this 获取 props 里面的内容	vue3 直接通过 props	Vu3的Options Api 还是需要this获取
父子组件传值		vue3 在向父组件传回数据时，如使用的自定义名称，如 backData，则需要在 emits 中定义一下

问题1：Proxy只会代理对象的第一层，那么Vue3又是怎样处理这个问题的呢？（判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理， 这样就实现了深度观测）

问题2：监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？（可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger。相当于做了一层数据过滤）

vm.$nextTick

1、Vue 的响应式数据变化触发的 DOM 更新是异步的。直接操作 DOM 可能无法获取最新状态，此时需通过 $nextTick 等待 DOM 更新完成
2、无法保证绝对同步，有延迟（通过浏览器的任务实现（根据环境实现顺序：Promise->MutationObserver->setImmediate->setTimeout）多次调用nextTick会将方法存入队列中，通过这个异步方法清空当前队列）
3、优先使用 await this.$nextTick() 语法，并切不要高频使用，会触发重复渲染

diff算法要点：算法是虚拟 DOM（Virtual DOM）技术的核心，用于高效对比新旧虚拟节点（VNode）的差异，并最小化真实 DOM 操作

要点	说明	备注
同级比较	将传统树对比的 O(n³) 复杂度降至 O(n)。	每个v-for都应该使用不同的index(key)，切保证唯一
插入	A,B,C,D,E 在 C、D中插入F 1、Diff 算法默认执行起来是这样的， C->F，D->C，E->D，最后再插入 E 2、使用 key 来给每个节点做一个唯一标识，Diff 算法就可以正确的识别此节点	每个v-for都应该使用不同的index(key)，切保证唯一

一些注意点

注意点	说明	备注
v-for	1、key 保证唯一 2、长列表滚动到可视区域动态加载
v-if/v-show	v-if不会渲染DOM元素 v-show隐藏/显示	优化项：频繁渲染，直接使用v-show，尽量使用使用 v-show 替代 v-if
SSR	优点：也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端。更好的SEO、并且首屏加载速度更快等优点 缺点：服务器端渲染只支持beforeCreate和created两个钩子 ，使用node.js负载大
computed/Watch	computed：监听多个绑定数据，用于变更一个绑定数据 Watch：监听一个绑定数据，用于自动观察触发	Watch可以在组件中监听父组件的传值变化
尽量减少 data 中的数据	data 中的数据都会增加 getter 和 setter，会收集对应的 watcher
v-if 和 v-for 不能连用	1、vue3中v-if优先级高于v-for。 2、vue2中 v-for 优先级高于 v-if	1、外层包裹 <template> 标签使用v-for
v-for 给每项元素绑定事件时使用事件代理	1、利用事件冒泡的原理,将事件监听器绑定到父元素上	会减少时间创建和绑定
SPA 页面采用 keep-alive 缓存组件
防抖、节流
图片懒加载

Vue、React、AngularJS 的区别(持续更新中)

模块	Vue	React	AngularJS
Virtual DOM	是	是
响应式	是	是
组件化	是	是

vue3常用接口

接口	说明	备注
nextTick()	等待下一次 DOM 更新刷新
isRef()	检查某个值是否为 ref
toRaw()	返回Ref中的数据,将reactive对象转成普通对象
toRefs()	将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref	相当于拆解Object的属性为ref
toRef()	于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然