vue2 与 vue3的区别

[1. 响应式系统的改变](#1. 响应式系统的改变)

[2. API结构的变化 - Composition API](#2. API结构的变化 - Composition API)

[3. 支持片段（Fragments）](#3. 支持片段（Fragments）)

[4. 生命周期钩子的变化](#4. 生命周期钩子的变化)

5.v-if和v-for的优先级

Vue.js是一个非常流行的前端框架，用于构建用户界面。从Vue 2到Vue 3的过渡带来了一系列的改进和变化，旨在提高性能、增强可维护性和提升开发者体验。

1. 响应式系统的改变

Vue 2 使用 **Object.defineProperty**来实现数据的响应式，这限制了对属性的动态添加或删除的响应式处理。

Vue 3 引入了 Proxy，它能够代理整个对象，从而实现了更全面的响应式，包括属性的添加、删除以及数组的变化等。

Vue 2 (使用 Object.defineProperty 的隐式响应式)

javascript 复制代码

new Vue({
  data: {
    message: 'Hello Vue 2!'
  }
})

Vue 3 (使用 ref 或 reactive 创建响应式对象)

javascript 复制代码

import { ref, reactive } from 'vue'
// 使用 ref 创建基本类型的响应式变量
const message = ref('Hello Vue 3!')
// 使用 reactive 创建对象的响应式副本
const state = reactive({ message: 'Hello Vue 3!' })

2. API结构的变化 - Composition API

Vue 2 主要依赖于选项API（Options API），其中数据、计算属性、方法等被组织在不同的选项中。

Vue 3 引入了组合API （Composition API），它鼓励使用函数式的编程风格，通过 setup() 函数集中管理组件的状态和行为，使代码更模块化、可重用。

Vue 2 (使用 Options API)

javascript 复制代码

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

Vue 3 (使用 Composition API)

javascript 复制代码

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    onMounted(() => {
      console.log('Component mounted.');
    });
    return {
      count,
      increment
    };
  }
}

3. 支持片段（Fragments）

Vue 2 不直接支持组件有多个根节点。

Vue 3 支持组件返回多个根节点，无需额外包装器元素。

html 复制代码

<!-- Vue 3 -->
<template>
  <h1>Title</h1>
  <p>Paragraph</p>
</template>

4. 生命周期钩子的变化

创建前：beforeCreate -> 使用setup()
创建后：created -> 使用setup()
挂载前：beforeMount -> onBeforeMount
挂载后：mounted -> onMounted
更新前：beforeUpdate -> onBeforeUpdate
更新后：updated -> onUpdated
销毁前：beforeDestroy -> onBeforeUnmount
销毁后：destroyed -> onUnmounted
异常捕获：errorCaptured -> onErrorCaptured
被激活：onActivated 被包含在<keep-alive>中的组件，会多出两个生命周期钩子函数。被激活时执行。
切换：onDeactivated 比如从 A 组件，切换到 B 组件，A 组件消失时执行

Vue 3 提供了更好的TypeScript集成，使得在开发时能够享受静态类型检查的好处，减少运行时错误。

5.v-if和v-for的优先级

Vue 2 中 v-for的优先级高于v-if。

如果同时出现，每次渲染都会先执行循环在判断条件，无论如何循环都不可避免，浪费了性能
要避免出现这种情况，在外层嵌套template，在这层进行v-if判断，然后在内部进行v-for循环

Vue 3 中 v-if的优先级高于v-for。

不推荐同时使用 v-if 和 v-for。
当v-if与v-for 一起使用时，v-if 具有比 v-for更高的优先级。

详解请看👉 v-if 和 v-for的优先级