百度360必应搜狗淘宝本站头条
vue dispatchspring gatewayorder by ascidea eval resetupdate canceled
当前位置：网站首页 > 技术分类 > 正文

面试官:vue2和vue3的区别有哪些?（vue3和vue2的优缺点）

ztj100 2025-06-10 04:17 11 浏览 0 评论

1. 生命周期

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

// vue3
<script setup>     
import { onMounted } from 'vue';   // 使用前需引入生命周期钩子

onMounted(() => {
  // ...
});

// 可将不同的逻辑拆开成多个onMounted，依然按顺序执行，不会被覆盖
onMounted(() => {
  // ...
});
</script>

// vue2
<script>     
export default {           mounted() {   // 直接调用生命周期钩子            
    // ...         
  },           }
</script>

常用生命周期对比如下表所示。

vue2

vue3

beforeCreate


created


beforeMount

onBeforeMount

mounted

onMounted

beforeUpdate

onBeforeUpdate

updated

onUpdated

beforeDestroy

onBeforeUnmount

destroyed

onUnmounted

2. 多根节点

熟悉 Vue2 的朋友应该清楚，在模板中如果使用多个根节点时会报错，如下所示。

// vue2中在template里存在多个根节点会报错
<template>
  <header></header>
  <main></main>
  <footer></footer>
</template>

// 只能存在一个根节点，需要用一个<div>来包裹着
<template>
  <div>
    <header></header>
    <main></main>
    <footer></footer>
  </div>
</template>

但是，Vue3 支持多个根节点，也就是 fragment。即以下多根节点的写法是被允许的。

<template>
  <header></header>
  <main></main>
  <footer></footer>
</template>

3. Composition API

Vue2 是选项API（Options API），一个逻辑会散乱在文件不同位置（data、props、computed、watch、生命周期钩子等），导致代码的可读性变差。当需要修改某个逻辑时，需要上下来回跳转文件位置。

Vue3 组合式API（Composition API）则很好地解决了这个问题，可将同一逻辑的内容写到一起，增强了代码的可读性、内聚性，其还提供了较为完美的逻辑复用性方案。

4. 异步组件（Suspense）

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

<tempalte>
  <suspense>
    <template #default>
      <List />
    </template>
    <template #fallback>
      <div>
        Loading...      </div>
    </template>
  </suspense>
</template>

在 List 组件（有可能是异步组件，也有可能是组件内部处理逻辑或查找操作过多导致加载过慢等）未加载完成前，显示 Loading...（即 fallback 插槽内容），加载完成时显示自身（即 default 插槽内容）。

5. Teleport

teleport 是 Vue 3 中新增的一个特性，用于将组件的内容渲染到指定的 DOM 节点上，而不是当前组件所在的 DOM 结构中。它可以用于在组件外部的 DOM 中渲染内容，提供更大的灵活性和控制性。

使用 teleport 可以将组件的内容挂载到指定的 DOM 节点上，而不会受到组件的父组件和层级关系的影响。这在处理一些需要将组件内容插入到特定位置的情况下非常有用，例如在模态框、弹出框或全局通知中。

<template>
  <div>
    <button @click="showModal">打开模态框</button>
    <teleport to="body">
      <Modal v-if="isModalOpen" @close="closeModal" />
    </teleport>
  </div>
</template>

<script>
import { ref } from 'vue';
import Modal from './Modal.vue';

export default {
  components: {
    Modal
  },
  setup() {
    const isModalOpen = ref(false);

    const showModal = () => {
      isModalOpen.value = true;
    };

    const closeModal = () => {
      isModalOpen.value = false;
    };

    return {
      isModalOpen,
      showModal,
      closeModal
    };
  }
}
</script>

在上面的示例中，当点击按钮时，会触发 showModal 方法，将 isModalOpen 设置为 true，从而显示模态框组件。而模态框组件的内容会被使用 teleport 指令挂载到 <body> 元素下，不受当前组件的限制。

需要注意的是，在使用 teleport 时需要指定 to 属性，该属性指定了挂载的目标 DOM 节点的选择器或 DOM 元素。可以使用类似 to="body" 的方式指定目标节点。

6. 响应式原理

在Vue 2中，响应式是通过使用Object.defineProperty对数据对象进行劫持实现的。当数据对象被访问或修改时，会触发相应的get和set方法，从而实现对数据的追踪和更新视图。Vue 2的响应式系统对数据的劫持是在初始化阶段进行的，需要将数据对象转换为响应式对象。

而在Vue 3中，响应式的实现方式发生了变化，使用了基于ES6的Proxy对象。Proxy对象可以拦截并代理对目标对象的访问，提供更细粒度的拦截操作。Vue 3利用Proxy对象对数据对象进行包装，通过拦截对数据的访问和修改，实现对数据的追踪和更新。相比Vue 2的Object.defineProperty，Proxy对象可以提供更多的拦截操作，使得响应式系统更加灵活和高效。

此外，Vue 3的响应式系统还引入了一种新的追踪变化的机制，称为代理式跟踪（Proxy-based tracking）。通过在数据对象上使用代理，Vue 3能够跟踪数据的访问和修改，并在需要更新视图时进行精确的触发。这种追踪变化的机制相比Vue 2的递归遍历更加高效，可以减少不必要的操作和性能开销。

总的来说，Vue 2和Vue 3的响应式原理都是基于数据劫持的概念，但实现方式上有所不同。Vue 3使用了更先进的Proxy对象和代理式跟踪机制，提供了更好的性能和扩展性。同时，Vue 3的响应式系统在开发体验和语法上与Vue 2保持了一致，使得迁移和使用更加顺畅。

7. 虚拟DOM

在Vue 3中，相较于Vue 2，虚拟DOM节点（Virtual DOM）的数据结构中增加了patchFlag字段。patchFlag是一个用于标记节点属性和子节点的标志位，用于在更新过程中进行更精确的DOM操作，从而提高性能和效率。

在Vue 2中，对于每个虚拟DOM节点，需要进行完整的比较和更新操作，无论节点的属性和子节点是否发生变化。这样会导致一些不必要的性能开销，尤其是在大规模列表或复杂组件中。

而在Vue 3中，通过引入patchFlag字段，可以精确地知道哪些节点需要进行更新，从而避免不必要的比较和操作。patchFlag的值代表了节点的不同变化情况，例如属性变化、子节点变化、文本变化等，通过检查patchFlag的值，可以确定需要执行的具体更新操作。

通过使用patchFlag字段，Vue 3能够更高效地处理虚拟DOM的更新，避免不必要的操作，减少了DOM操作的数量和时间，提高了性能和渲染速度。

需要注意的是，patchFlag字段是Vue 3内部使用的，开发者在正常使用Vue 3时通常无需直接操作或关注该字段，它是由Vue 3的编译器和渲染器自动处理的。它的引入主要是为了优化Vue 3的渲染过程，提升性能和效率。

<div id="app">
  <h1>vue3虚拟DOM讲解</h1>
  <p>今天天气真不错</p>
  <div>{{name}}</div>
</div>

渲染函数如下所示。

import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from vue

const _withScopeId = n => (_pushScopeId(scope-id),n=n(),_popScopeId(),n)
const _hoisted_1 = { id: app }
const _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(h1, null, vue3虚拟DOM讲解, -1 /* HOISTED */))
const _hoisted_3 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(p, null, 今天天气真不错, -1 /* HOISTED */))

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock(div, _hoisted_1, [
    _hoisted_2,
    _hoisted_3,
    _createElementVNode(div, null, _toDisplayString(_ctx.name), 1 /* TEXT */)
  ]))
}

注意第3个_createElementVNode的第4个参数即 patchFlag 字段类型。

字段类型情况：1 代表节点为动态文本节点，那在 diff 过程中，只需比对文本对容，无需关注 class、style等。除此之外，发现所有的静态节点（HOISTED 为 -1），都保存为一个变量进行静态提升，可在重新渲染时直接引用，无需重新创建。

// patchFlags 字段类型列举
export const enum PatchFlags { 
  TEXT = 1,   // 动态文本内容
  CLASS = 1 << 1,   // 动态类名
  STYLE = 1 << 2,   // 动态样式
  PROPS = 1 << 3,   // 动态属性，不包含类名和样式
  FULL_PROPS = 1 << 4,   // 具有动态 key 属性，当 key 改变，需要进行完整的 diff 比较
  HYDRATE_EVENTS = 1 << 5,   // 带有监听事件的节点
  STABLE_FRAGMENT = 1 << 6,   // 不会改变子节点顺序的 fragment
  KEYED_FRAGMENT = 1 << 7,   // 带有 key 属性的 fragment 或部分子节点
  UNKEYED_FRAGMENT = 1 << 8,   // 子节点没有 key 的fragment
  NEED_PATCH = 1 << 9,   // 只会进行非 props 的比较
  DYNAMIC_SLOTS = 1 << 10,   // 动态的插槽
  HOISTED = -1,   // 静态节点，diff阶段忽略其子节点
  BAIL = -2   // 代表 diff 应该结束
}

8. 事件缓存

Vue3 的cacheHandler可在第一次渲染后缓存我们的事件。相比于 Vue2 无需每次渲染都传递一个新函数。加一个 click 事件。

<div id="app">
  <h1>vue3事件缓存讲解</h1>
  <p>今天天气真不错</p>
  <div>{{name}}</div>
  <span onCLick=() => {}><span>
</div>

渲染函数如下所示。

import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from vue

const _withScopeId = n => (_pushScopeId(scope-id),n=n(),_popScopeId(),n)
const _hoisted_1 = { id: app }
const _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(h1, null, vue3事件缓存讲解, -1 /* HOISTED */))
const _hoisted_3 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(p, null, 今天天气真不错, -1 /* HOISTED */))
const _hoisted_4 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(span, { onCLick: () => {} }, [
  /*#__PURE__*/_createElementVNode(span)
], -1 /* HOISTED */))

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock(div, _hoisted_1, [
    _hoisted_2,
    _hoisted_3,
    _createElementVNode(div, null, _toDisplayString(_ctx.name), 1 /* TEXT */),
    _hoisted_4
  ]))
}

观察以上渲染函数，你会发现 click 事件节点为静态节点（HOISTED 为 -1），即不需要每次重新渲染。

9. Diff算法优化

搬运 Vue3 patchChildren 源码。结合上文与源码，patchFlag 帮助 diff 时区分静态节点，以及不同类型的动态节点。一定程度地减少节点本身及其属性的比对。

function patchChildren(n1, n2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized) {
  // 获取新老孩子节点
  const c1 = n1 && n1.children
  const c2 = n2.children
  const prevShapeFlag = n1 ? n1.shapeFlag : 0
  const { patchFlag, shapeFlag } = n2

  // 处理 patchFlag 大于 0 
  if(patchFlag > 0) {
    if(patchFlag && PatchFlags.KEYED_FRAGMENT) {
      // 存在 key
      patchKeyedChildren()
      return
    } els if(patchFlag && PatchFlags.UNKEYED_FRAGMENT) {
      // 不存在 key
      patchUnkeyedChildren()
      return
    }
  }

  // 匹配是文本节点（静态）：移除老节点，设置文本节点
  if(shapeFlag && ShapeFlags.TEXT_CHILDREN) {
    if (prevShapeFlag & ShapeFlags.ARRAY_CHILDREN) {
      unmountChildren(c1 as VNode[], parentComponent, parentSuspense)
    }
    if (c2 !== c1) {
      hostSetElementText(container, c2 as string)
    }
  } else {
    // 匹配新老 Vnode 是数组，则全量比较；否则移除当前所有的节点
    if (prevShapeFlag & ShapeFlags.ARRAY_CHILDREN) {
      if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
        patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense,...)
      } else {
        unmountChildren(c1 as VNode[], parentComponent, parentSuspense, true)
      }
    } else {

      if(prevShapeFlag & ShapeFlags.TEXT_CHILDREN) {
        hostSetElementText(container, '')
      } 
      if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
        mountChildren(c2 as VNodeArrayChildren, container,anchor,parentComponent,...)
      }
    }
  }
}

patchUnkeyedChildren 源码如下所示。

function patchUnkeyedChildren(c1, c2, container, parentAnchor, parentComponent, parentSuspense, isSVG, optimized) {
  c1 = c1 || EMPTY_ARR
  c2 = c2 || EMPTY_ARR
  const oldLength = c1.length
  const newLength = c2.length
  const commonLength = Math.min(oldLength, newLength)
  let i
  for(i = 0; i < commonLength; i++) {
    // 如果新 Vnode 已经挂载，则直接 clone 一份，否则新建一个节点
    const nextChild = (c2[i] = optimized ? cloneIfMounted(c2[i] as Vnode)) : normalizeVnode(c2[i])
    patch()
  }
  if(oldLength > newLength) {
    // 移除多余的节点
    unmountedChildren()
  } else {
    // 创建新的节点
    mountChildren()
  }

}

10. 打包优化

Tree-shaking：模块打包 webpack、rollup 等中的概念。移除 JavaScript 上下文中未引用的代码。主要依赖于 import 和 export 语句，用来检测代码模块是否被导出、导入，且被 JavaScript 文件使用。

以 nextTick 为例子，在 Vue2 中，全局API暴露在Vue实例上，即使未使用，也无法通过 tree-shaking 进行消除。

import Vue from 'vue';

Vue.nextTick(() => {
  // 一些和DOM有关的东西
});

Vue3 中针对全局和内部的API进行了重构，并考虑到 tree-shaking 的支持。因此，全局API现在只能作为ES模块构建的命名导出进行访问。

import { nextTick } from 'vue';   // 显式导入

nextTick(() => {
  // 一些和DOM有关的东西
});

通过这一更改，只要模块绑定器支持 tree-shaking，则Vue应用程序中未使用的 api 将从最终的捆绑包中消除，获得最佳文件大小。

受此更改影响的全局API如下所示。

  • Vue.nextTick
  • Vue.observable （用 Vue.reactive 替换）
  • Vue.version
  • Vue.compile （仅全构建）
  • Vue.set （仅兼容构建）
  • Vue.delete （仅兼容构建）

内部API也有诸如 transition、v-model 等标签或者指令被命名导出。只有在程序真正使用才会被捆绑打包。Vue3 将所有运行功能打包也只有约22.5kb，比 Vue2 轻量很多。

相关推荐

再说圆的面积-蒙特卡洛（蒙特卡洛方法求圆周率的matlab程序）

在微积分-圆的面积和周长(1)介绍微积分方法求解圆的面积，本文使用蒙特卡洛方法求解圆面积。...

python编程:如何使用python代码绘制出哪些常见的机器学习图像?

专栏推荐...

python创建分类器小结（pytorch分类数据集创建）

简介：分类是指利用数据的特性将其分成若干类型的过程。监督学习分类器就是用带标记的训练数据建立一个模型，然后对未知数据进行分类。...

matplotlib——绘制散点图（matplotlib散点图颜色和图例）

绘制散点图不同条件（维度）之间的内在关联关系观察数据的离散聚合程度...

python实现实时绘制数据（python如何绘制）

方法一importmatplotlib.pyplotaspltimportnumpyasnpimporttimefrommathimport*plt.ion()#...

简单学Python——matplotlib库3——绘制散点图

前面我们学习了用matplotlib绘制折线图，今天我们学习绘制散点图。其实简单的散点图与折线图的语法基本相同，只是作图函数由plot()变成了scatter()。下面就绘制一个散点图：import...

数据分析-相关性分析可视化（相关性分析数据处理）

前面介绍了相关性分析的原理、流程和常用的皮尔逊相关系数和斯皮尔曼相关系数，具体可以参考...

免费Python机器学习课程一:线性回归算法

学习线性回归的概念并从头开始在python中开发完整的线性回归算法最基本的机器学习算法必须是具有单个变量的线性回归算法。如今，可用的高级机器学习算法，库和技术如此之多，以至于线性回归似乎并不重要。但是...

用Python进行机器学习(2)之逻辑回归

前面介绍了线性回归，本次介绍的是逻辑回归。逻辑回归虽然名字里面带有“回归”两个字，但是它是一种分类算法，通常用于解决二分类问题，比如某个邮件是否是广告邮件，比如某个评价是否为正向的评价。逻辑回归也可以...

【Python机器学习系列】拟合和回归傻傻分不清?一文带你彻底搞懂

一、拟合和回归的区别拟合...

推荐2个十分好用的pandas数据探索分析神器

作者：俊欣来源：关于数据分析与可视化...

向量数据库:解锁大模型记忆的关键!选型指南+实战案例全解析

本文较长，建议点赞收藏，以免遗失。更多AI大模型应用开发学习视频及资料，尽在...

用Python进行机器学习(11)-主成分分析PCA

我们在机器学习中有时候需要处理很多个参数，但是这些参数有时候彼此之间是有着各种关系的，这个时候我们就会想：是否可以找到一种方式来降低参数的个数呢？这就是今天我们要介绍的主成分分析，英文是Princip...

神经网络基础深度解析:从感知机到反向传播

本文较长，建议点赞收藏，以免遗失。更多AI大模型应用开发学习视频及资料，尽在...

Python实现基于机器学习的RFM模型

CDA数据分析师出品作者：CDALevelⅠ持证人岗位：数据分析师行业：大数据...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表
Copyright Your WebSite.Some Rights Reserved.