前端经典面试题 | 吊打面试官系列 之 Vue2和Vue3的区别
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
🖥️ 前端经典面试题 吊打面试官 专栏Vue2和Vue3的区别
🧑💼 个人简介一个不甘平庸的平凡人🍬✨ 个人主页CoderHing的个人主页
🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️
👉 你的一键三连是我更新的最大动力❤️
目录
一、回答点
监测机制的变化、Fragments碎片的更新、API模式的变更、数据的存放、生命周期钩子、父子传参等。。
二、深入回答
监测机制的变化
- Vue3中使用了ES6中Proxy API 对数据进行代理监测整个对象而不再是某个属性。
- 消除Vue2中基于Object.defineProperty的实现所存在的诸多限制。
- Vue3可以监测到对象属性的添加和删除也可以监听到数组的变化。
- Vue3中支持Map、Set、WeakMap和WeakSet
Fragments碎片
- Vue2在组件中只能有一个根节点。
- Vue3在组件中可以拥有多个根节点。
API模式的变化
- Vue2使用选项式APIOptions API。Vue3使用组合式APIComposition API
数据的存放
- Vue2中数据存放在data属性中
- Vue3使用setup()方法setup()方法在组件初始化构造的时候触发。
- 从vue引入ref或reactive
- 简单数据类型使用ref()方法进行处理复杂数据类型使用reactive()方法进行处理。
- 使用setup()方法来返回响应式数据在template可以获取这些响应式数据。
生命周期钩子
- setup()开始创建组件之前在beforeCreate和created之前执行。
- onBeforeMount()组件挂载到节点之前执行。
- onMounted()组件挂载完成之后执行。
- onBeforeUpdate()组件更新之前执行。
- onUpdated()组件更新之后执行。
- onBeforeUnmount()组件卸载之前执行。
- onUnmounted()组件卸载之后执行
- 若组件被keep-alive包裹则多出两个钩子函数
- onActivated()被激活时执行。
- onDeactivated()A组件切换到B组件。A组件消失时执行。
- 若组件被keep-alive包裹则多出两个钩子函数
父子传参
- 子组件通过defineProps()进行接收并且接收这个函数的返回值进行相应操作。
diff算法
- Vue2进行虚拟节点对比并返回一个patch对象来存储两个节点的不同最后用patch记录的消息去局部更新Dom。它会比较每一个Vnode但对一些不参与更新的元素进行比较会消耗性能。
- Vue3diff算法在初始化时会给每个虚拟节点一个patchFlags优化的一个标识。只会比较patchFlags发生变化的Vnode从而进行视图更新对比没有变化的做静态标记渲染时直接复用。
v-if和v-for优先级
- Vue2中v-for优先执行
- Vue3中v-if优先执行
- 注最好不要把v-if和v-for同时用在一个元素上这样会带来性能的浪费