【面试复习】Vue2 .0 和Vue3.0的区别

学习目标：

• 掌握 3.0知识

---

学习内容：

1.生命周期的变化

整体来看，变化不大，只是名字大部分需要 + on，功能上类似。使用上 Vue3 组合式 API 需要先引入；Vue2 选项 API 则可直接调用，如下所示。

 Tips： setup是围绕beforeCreate和created生命周期钩子运行的，所以不需要显式地去定义。

setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
onBeforeMount() : 组件挂载到节点上之前执行的函数。
onMounted() : 组件挂载完成后执行的函数。
onBeforeUpdate(): 组件更新之前执行的函数。
onUpdated(): 组件更新完成之后执行的函数。
onBeforeUnmount(): 组件卸载之前执行的函数。
onUnmounted(): 组件卸载完成后执行的函数
若组件被包含，则多出下面两个钩子函数。
onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行 。
onDeactivated(): 比如从 A组件，切换到 B 组件，A 组件消失时执行。
————————————————
 

2.响应式原理

Vue2使⽤的是Object.defineProperty()进⾏数据劫持，结合发布订阅的⽅式实现。

Vue3使⽤的是Proxy代理，使⽤ref或者reactive将数据转化为响应式数据

在Vue2的响应式中，存在着新增属性，删除属性以及直接通过下标修改数组，但页面不会自动更新的问题。但是在Vue3中，这些问题都得以解决。

实现原理：
通过Proxy（代理）： 拦截对象中任意属性的变化，包括：属性值的读写，属性的增加，属性的删除等。

通过Reffect（反射）： 对源对象的属性进行操作

const p = new Proxy(target, handler)

参数：
target：
要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。

handler：
一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。

 ————————————————

3.虚拟dom

4.多根节点

5.监听的变化

6.定义全局变量的方法变化

7.插槽使用变化

8.v-model 升级

9.异步组件的使用

Vue3 提供 Suspense组件，允许程序在等待异步组件时渲染兜底的内容，如 loading ，使用户体验更平滑。使用它，需在模板中声明，并包括两个命名插槽：default和fallback。Suspense确保加载完异步内容时显示默认插槽，并将fallback插槽用作加载状态。

 Tips： 真实的项目中踩过坑，若想在 setup 中调用异步请求，需在 setup 前加async关键字。这时，会受到警告async setup() is used without a suspense boundary。

解决方案：在父页面调用当前组件外包裹一层Suspense组件。

Teleport

Vue3 提供Teleport组件可将部分DOM移动到 Vue app之外的位置。比如项目中常见的Dialog组件。

————————————————

10.移除filter（过滤器）

11..v-if 与 v-for 的优先级调整

12.事件缓存

13.组件传值

---

学习产出：

提示：这里统计学习计划的总量

例如：

• 技术笔记 2 遍
• CSDN 技术博客 3 篇
• vlog 视频 1 个