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

这篇具有很好参考价值的文章主要介绍了前端经典面试题 | 吊打面试官系列 之 Vue2和Vue3的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

✨ 个人主页:CoderHing的个人主页

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

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


目录

一、回答点

二、深入回答

监测机制的变化

Fragments(碎片)

API模式的变化

数据的存放

生命周期钩子

父子传参

diff算法

v-if和v-for优先级


一、回答点

监测机制的变化、Fragments(碎片)的更新、API模式的变更、数据的存放、生命周期钩子、父子传参等。。文章来源地址https://www.toymoban.com/news/detail-794797.html

二、深入回答

监测机制的变化

  • Vue3中使用了ES6中Proxy API 对数据进行代理,监测整个对象,而不再是某个属性。
  • 消除Vue2中基于Object.defineProperty的实现所存在的诸多限制。
  • Vue3可以监测到对象属性的添加和删除也可以监听到数组的变化。
  • Vue3中支持Map、Set、WeakMap和WeakSet

Fragments(碎片)

  • 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同时用在一个元素上,这样会带来性能的浪费

到了这里,关于前端经典面试题 | 吊打面试官系列 之 Vue2和Vue3的区别的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端2023最全面试题(javaScript、typeScript、vue2、vue3、html、css、uniapp、webpack、vite、react)

    答案:JavaScript中的闭包是一种函数,它有权访问其词法环境的变量和其它函数。这意味着,即使其包含它的函数已经执行完毕,其词法环境仍然存在,因此可以访问其作用域内的变量。 答案:回调函数是在某个特定事件之后执行的函数。在JavaScript中,通常使用回调函数来处

    2024年02月06日
    浏览(62)
  • 持续不断更新中... 自己整理的一些前端知识点以及前端面试题,包括vue2,vue3,js,ts,css,微信小程序等

    答: 在普通的前端项目工程中,在script标签中增加setup即可使用api 使用setup()钩子函数 答: 不要在计算属性中进行异步请求或者更改DOM 不要直接修改computed的值 区别: 计算属性值基于其响应式依赖被缓存,意思就是只要他之前的依赖不发生变化,那么调用他只会返回之前缓

    2024年02月11日
    浏览(58)
  • vue3和vue2区别

    在 Vue 2 中,使用了 Object.defineProperty 来实现数据的响应式。它通过逐个定义对象属性的方式来进行数据的劫持和监听。这种方式存在一些限制,例如无法监听新增的属性,需要使用 Vue 提供的 $set 方法来实现响应式。此外,由于需要逐个定义属性,对于大型对象或数组的性能

    2024年01月17日
    浏览(42)
  • vue2与vue3的区别

    引言:本文讲的是vue2与vue3的区别,其实这算是老生常谈了,vue3出的时间也很久了,在vue2的基础上使得整个框架更加的轻便,在企业中应用vue3的也不少,但是vue2作为经典且稳定版本也有很多项目在使用,接下来就讲讲vue2与vue3有哪些区别。 响应式作为vue关键的特性,vue3在

    2024年02月12日
    浏览(42)
  • vue2和vue3的区别

    Vue 2和Vue 3是Vue.js框架的两个不同版本,下面是它们之间的一些主要区别: 性能提升:Vue 3在底层进行了重写,使用了更高效的编译器,生成的代码更小,在运行时有更快的速度和更低的内存消耗。 Composition API:Vue 3引入了Composition API,它使得组件逻辑可以更容易地组织和复用

    2024年01月18日
    浏览(45)
  • vue2和vue3的区别(Vue3升级部分)

    区别有两个目的:一面试说一下书面化的表达,二工作需要升级大白话说一下项目应用的区别。 双向数据绑定: vue2 的双向数据绑定是利⽤ES5 的⼀个 API ,Object.defineProperty()对数据进⾏劫持 结合 发布订阅(gettersetter)模式的⽅式来实现的。 vue3 中使⽤了 ES6 的 ProxyAPI 对数据

    2024年02月12日
    浏览(43)
  • Vue3和Vue2有什么区别?

    先来说说Vue3相对于Vue2的优点吧: 更快的渲染速度 更小的体积 更少的内存占用 更丰富的功能 听起来好像Vue3比Vue2强很多啊,但是具体强在哪里呢?我们来看几个代码例子: 首先是安装Vue3和Vue2: 在Vue3中,如果你想注册一个组件,你可以这样做: 而在Vue2中,你需要这样做:

    2024年02月08日
    浏览(88)
  • 盘点 Vue3 与 Vue2 的区别

    对于生命周期来说,整体上变化不大,只是大部分生命周期钩子名称上 + “on”,功能上是类似的。不过有一点需要注意,Vue3 在组合式API(Composition API,下面展开)中使用生命周期钩子时需要先引入,而 Vue2 在选项API(Options API)中可以直接调用生命周期钩子,如下所示。

    2024年02月03日
    浏览(39)
  • 前端经典面试题 | Computed 和 Watch 的区别

    🖥️ 前端经典面试题专栏:前端经典面试题 | Computed 和 Watch 的区别 🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 ✨ 个人主页:CoderHing的个人主页 🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ 👉 你的一键三连是我更新的最大动力❤️ 目录 一、回答点 二、深入回

    2024年02月21日
    浏览(43)
  • vue3.0与vue2.0的区别

    Vue 3.0是一个用于构建用户界面的JavaScript框架。相比于Vue 2.x,Vue 3.0在性能、体积和开发体验上都有了很大的提升。 以下将从不同的角度上去分析Vue 3.0与Vue 2.0的区别: 从项目搭建和打包工具的选择来看: Vue 2.0 中通常会选择使用 webpack 或者 vue-cli 来进行项目搭建和打包。这

    2024年02月07日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包