面试题-Vue2和Vue3的区别

---

Vue 2 和 Vue 3 之间存在许多重要的区别，这些区别涵盖了性能、API 设计、组合式 API（Composition API）、响应式系统以及构建工具等方面。以下是一些关键的区别，并附带代码示例来加以说明。

1. 响应式系统

Vue 2 使用 Object.defineProperty 来进行数据劫持，它只能对对象的属性进行劫持，对于新增的属性或者数组的下标变更则无法监听。

Vue 2 示例：

// Vue 2 响应式数据  
data() {  
  return {  
    message: 'Hello Vue 2!'  
  };  
}

Vue 3 使用 Proxy 来实现响应式系统，它可以对对象进行更深层次的监听，包括新增属性和数组变更。

Vue 3 示例：

// Vue 3 响应式数据  
import { ref } from 'vue';  
  
setup() {  
  const message = ref('Hello Vue 3!');  
  
  // 可以通过message.value进行访问和修改  
  return {  
    message  
  };  
}

2. 组合式 API (Composition API)

Vue 3 引入了 Composition API，允许我们更加灵活地组织组件逻辑。

Vue 2 示例 (Options API):

export default {  
  data() {  
    return {  
      count: 0  
    };  
  },  
  methods: {  
    increment() {  
      this.count++;  
    }  
  }  
};

Vue 3 示例 (Composition API):

import { ref } from 'vue';  
  
export default {  
  setup() {  
    const count = ref(0);  
    const increment = () => {  
      count.value++;  
    };  
  
    return {  
      count,  
      increment  
    };  
  }  
};

3. Fragment (碎片)

Vue 3 支持组件有多个根节点。

Vue 2 示例 (需要根节点):

<template>  
  <div>  
    <header>...header>  
    <main>...main>  
    <footer>...footer>  
  div>  
template>

Vue 3 示例 (可以没有根节点):

<template>  
  <header>...header>  
  <main>...main>  
  <footer>...footer>  
template>

4. Teleport (传送门)

Vue 3 允许我们将模板的一部分“传送”到 DOM 树中的任何位置。

Vue 3 Teleport 示例:

<template>  
  <teleport to="body">  
    <div id="modal">...div>  
  teleport>  
template>

在这个例子中，

将被渲染到 的子节点中，而不是它原来的组件模板位置。

5. 性能改进

Vue 3 在很多方面进行了性能优化，比如编译优化、更快的组件初始化、更快的更新渲染等。由于这些优化是内部的，所以不会直接体现在代码上。

6. 移除或改变的功能

• $on, $off, $once 实例方法已被移除。
• filter 过滤器已被移除。
• v-model 在自定义组件上的行为有所改变，现在它默认使用 modelValue 作为 prop 和 update:modelValue 作为事件。
• 异步组件的 API 有所改变。

7. 构建工具

Vue 3 官方推荐使用 Vite 作为构建工具，它比 Vue 2 中常用的 Webpack 构建速度更快。但你也可以在 Vue 3 中继续使用 Webpack。

8. TypeScript 支持

Vue 3 对 TypeScript 的支持更加完善，使得在 Vue 3 中使用 TypeScript 编写代码更加容易和可靠。

您好，我是肥晨。
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。