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

本文介绍: 只会比较 patchFlag s发生变化的Vnode，从而进行视图更新，对比没有变化的做静态标记，渲染时直接复用。Vue2：进行虚拟节点对比，并返回一个 patch 对象来存储两个节点的不同，最后用patch 记录的消息去局部更新Do m。监测机制的变化、Frag m e n ts（碎片）的更新、API模式的变更、数据的存放、生命周期钩子、父子传参等。简单数据类型使用 ref()方法进行处理，复杂数据类型使用 reactive()方法进行处理。Vue3使用 setup()方法，set up()方法在组件初始化构造的时候触发。

一、回答点

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

二、深入回答

监测机制的变化

Vue3中使用了ES6中Pro x y API 对数据进行代理，监测整个对象，而不再是某个属性。

消除Vue2中基于Obje ct.definePrope rt y的实现所存在的诸多限制。

Vue3可以监测到对象属性的添加和删除也可以监听到数组的变化。

Vue3中支持Map、Set、Wea kMap和Wea kSet

Frag men ts（碎片）

Vue2在组件中只能有一个根节点。

Vue3在组件中可以拥有多个根节点。

API模式的变化

Vue2使用选项式API（Op t ion s API）。Vue3使用组合式API（Co m position API）

数据的存放

Vue2中数据存放在data属性中

Vue3使用set up()方法，setup()方法在组件初始化构造的时候触发。

从vue 引入 ref或reactive

简单数据类型使用ref()方法进行处理，复杂数据类型使用reactive()方法进行处理。

使用setup()方法来返回响应式数据，在template 可以获取这些响应式数据。

生命周期钩子

setup()：开始创建组件之前，在beforeCre a te和create d之前执行。

onBef o reMoun t()：组件挂载到节点之前执行。

onMoun ted()：组件挂载完成之后执行。

onBef o reUp date()：组件更新之前执行。

onUp date d()：组件更新之后执行。

onBef o reUnmount()：组件卸载之前执行。

onUnmounted()：组件卸载之后执行

若组件被keep–a live 包裹，则多出两个钩子函数

onAc tivated()：被激活时执行。

onDeactivated()：A组件切换到B组件。A组件消失时执行。

父子传参

子组件通过 definePr op s()进行接收，并且接收这个函数的返回值进行相应操作。

diff 算法

Vue2：进行虚拟节点对比，并返回一个 patch 对象来存储两个节点的不同，最后用patch记录的消息去局部更新Dom。它会比较每一个Vnode但对一些不参与更新的元素，进行比较会消耗性能。

Vue3：diff 算法在初始化时会给每个虚拟节点一个 pat chFla gs（优化的一个标识）。只会比较 pat chFla gs发生变化的Vnode，从而进行视图更新，对比没有变化的做静态标记，渲染时直接复用。

v–i f和v–for 优先级

Vue2中：v–for 优先执行

Vue3中：v-if优先执行

注：最好不要把v-if和v-for同时用在一个元素上，这样会带来性能的浪费

原文地址:https://blog.csdn.net/qq _38514921/article/de tail s/128692607

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_42084.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：su wngjj01@126.com进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

vue 数据类型更新

相关文章

发表回复 取消回复

发表回复取消回复