前端经典面试题 | 吊打面试官系列之 Vue2和Vue3的区别(前端经典面试题讲解)

发布时间：2024-01-17

前端经典面试题 | 吊打面试官系列之 Vue2和Vue3的区别

推荐整理分享前端经典面试题 | 吊打面试官系列之 Vue2和Vue3的区别(前端经典面试题讲解)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:前端面试题目100及最佳答案,前端面试题目100及最佳答案,2021前端经典面试题,前端面试题必问的题目,前端面试题大全,前端经典面试题讲解,前端经典面试题讲解,前端经典面试题及答案,内容如对您有帮助，希望把文章链接给更多的朋友！

🖥️ 前端经典面试题吊打面试官专栏：Vue2和Vue3的区别 🧑‍💼 个人简介：一个不甘平庸的平凡人🍬

✨ 个人主页：CoderHing的个人主页

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力❤️

一、回答点

二、深入回答

监测机制的变化

Fragments（碎片）

API模式的变化

数据的存放

生命周期钩子

父子传参

diff算法

v-if和v-for优先级

一、回答点

监测机制的变化、Fragments（碎片）的更新、API模式的变更、数据的存放、生命周期钩子、父子传参等。。

二、深入回答监测机制的变化Vue3中使用了ES6中Proxy API 对数据进行代理，监测整个对象，而不再是某个属性。消除Vue2中基于Object.defineProperty的实现所存在的诸多限制。Vue3可以监测到对象属性的添加和删除也可以监听到数组的变化。Vue3中支持Map、Set、WeakMap和WeakSetFragments（碎片）Vue2在组件中只能有一个根节点。Vue3在组件中可以拥有多个根节点。API模式的变化Vue2使用选项式API（Options API）。Vue3使用组合式API（Composition 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组件消失时执行。父子传参子组件通过defineProps()进行接收，并且接收这个函数的返回值进行相应操作。diff算法Vue2：进行虚拟节点对比，并返回一个patch对象来存储两个节点的不同，最后用patch记录的消息去局部更新Dom。它会比较每一个Vnode但对一些不参与更新的元素，进行比较会消耗性能。Vue3：diff算法在初始化时会给每个虚拟节点一个patchFlags（优化的一个标识）。只会比较patchFlags发生变化的Vnode，从而进行视图更新，对比没有变化的做静态标记，渲染时直接复用。v-if和v-for优先级Vue2中：v-for优先执行Vue3中：v-if优先执行注：最好不要把v-if和v-for同时用在一个元素上，这样会带来性能的浪费

本文链接地址:https://www.jiuchutong.com/zhishi/298462.html 转载请保留说明！

上一篇：【node进阶】在node.js中优雅的使用Socket.IO模块(node-)

下一篇：Vue项目实战 —— 后台管理系统( pc端 ) —— Pro最终版本(vue3.0实战项目)