前端进阶手册：彻底搞懂Vue2与Vue3的区别

Vue2与Vue3：引领前端开发新时代的革新

响应式系统：Proxy 代理下的高效演变

Vue3 响应式系统中引入的 Proxy 代理，取代了 Vue2 中的依赖收集，实现了更迅捷、直观的响应性机制。Proxy 代理可以自动侦测数据变化，减少不必要的更新，提升性能表现。

// Vue2 响应式数据
const data = { message: 'Hello, world!' };

// Vue2 依赖收集监听数据变化
let count = 0;
watch(data, () => {
  count++;
});

// 修改数据
data.message = 'Hello, Vue3!';

// Vue3 响应式数据
const data = reactive({ message: 'Hello, world!' });

// Vue3 Proxy 代理监听数据变化
let count = 0;
effect(() => {
  count++;
});

// 修改数据
data.message = 'Hello, Vue3!';

虚拟 DOM：更加敏捷的更新机制

Vue3 虚拟 DOM 采用了更优化的差异算法，仅更新必要部分，减少不必要的 DOM 渲染，从而大幅提升渲染性能。

// Vue2 虚拟 DOM
const app = new Vue({
  data: { count: 0 },
  template: `<div>{{ count }}</div>`,
});

// 更新数据
app.count++;

// Vue3 虚拟 DOM
const app = createApp({
  data: () => ({ count: 0 }),
  template: `<div>{{ count }}</div>`,
});

// 更新数据
app.count++;

组件化：更加灵活的模块化开发

Vue3 组件化进一步完善，引入了 Composition API，让你以更灵活的方式构建组件。你可以自由组合组件逻辑和状态，实现更细粒度的组件复用。

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

// Vue3 组件
export default {
  setup() {
    const count = reactive({ value: 0 });
    const increment = () => count.value++;
    return { count, increment };
  },
};

单向数据流：更加清晰的可维护代码

Vue3 坚持单向数据流原则，响应式系统和虚拟 DOM 严格遵循此原则，使代码结构更加清晰易懂，便于维护。

// Vue2 双向数据绑定
<input v-model="message">

// Vue3 单向数据绑定
<input v-bind:value="message">

TypeScript：更加强大的类型支持

Vue3 原生支持 TypeScript，让你享受类型系统的强大特性，增强代码健壮性、提升重构体验、加速开发效率。

// Vue2 TypeScript 类型支持（使用库）
import Vue from 'vue-property-decorator';

@Vue
export default class MyComponent extends Vue {
  @Prop() message: string;
}

// Vue3 原生 TypeScript 支持
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    message: {
      type: String,
      required: true,
    },
  },
});

Composition API：更加自由的组件构建

Composition API 允许你以更灵活的方式构建组件，将组件逻辑和状态解耦，实现更细粒度的代码重用。

// Vue2 组件逻辑和状态混合
export default {
  data() {
    return { message: 'Hello, world!' };
  },
  methods: {
    setMessage() {
      this.message = 'Hello, Vue3!';
    },
  },
};

// Vue3 组件逻辑和状态解耦
export default {
  setup() {
    const message = reactive({ value: 'Hello, world!' });
    const setMessage = () => message.value = 'Hello, Vue3!';
    return { message, setMessage };
  },
};

Reactivity API：更加细粒度的响应式控制

Reactivity API 提供了更细粒度的响应式控制，你可以使用 ref 和 reactive 创建响应式数据，使用 watch 和 computed 监听和计算数据变化。

// Vue2 响应式数据
const data = { message: 'Hello, world!' };

// Vue3 响应式数据
const message = ref('Hello, world!');
const count = reactive({ value: 0 });

// Vue2 监听数据变化
watch(data, () => {
  // ...
});

// Vue3 监听数据变化
watch(message, (newValue, oldValue) => {
  // ...
});
watch(count, () => {
  // ...
});

v-model、v-bind 和 v-on：更加简洁的指令

Vue3 简化了 v-model、v-bind 和 v-on 等指令，使其更加简洁易用。

// Vue2 v-model 指令
<input v-model="message">

// Vue3 v-model 指令
<input v-model:value="message">

// Vue2 v-bind 指令
<div v-bind:class="{ active: isActive }"></div>

// Vue3 v-bind 指令
<div :class="{ active: isActive }"></div>

// Vue2 v-on 指令
<button v-on:click="handleClick"></button>

// Vue3 v-on 指令
<button @click="handleClick"></button>

Vue Router：更加强大的路由系统

Vue Router 是 Vue 官方的路由系统，在 Vue3 中得到进一步增强。它提供了更灵活的路由配置、更强大的导航守卫和更友好的调试工具。

// Vue2 Vue Router 路由配置
const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ],
});

// Vue3 Vue Router 路由配置
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ],
});

Vuex：更加强大的状态管理系统

Vuex 是 Vue 官方的状态管理系统，在 Vue3 中也得到升级。它提供了更清晰的模块化结构、更强大的调试工具和更友好的 API。

// Vue2 Vuex 状态管理
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
});

// Vue3 Vuex 状态管理
const store = createStore({
  state: { count: 0 },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
});

Nuxt.js：更加完整的 Vue 生态系统

Nuxt.js 是基于 Vue 的框架，为 Vue 开发人员提供了一套完整的工具和解决方案，包括路由、状态管理、SSR、部署等。在 Vue3 中，Nuxt.js 也得到升级，以更好地支持 Vue3。

// Vue2 Nuxt.js 应用
export default {
  // ...
};

// Vue3 Nuxt.js 应用
export default defineNuxtConfig({
  // ...
});

Single File Components：更加便捷的组件开发

Single File Components (SFCs) 是一种将 HTML、CSS 和 JavaScript 代码放在单个文件中的方式。在 Vue3 中，SFCs 得到进一步优化，使组件开发更加便捷。

// Vue2 SFC
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return { message: 'Hello, world!' };
  },
};
</script>

<style>
div {
  color: red;
}
</style>

// Vue3 SFC
<template>
  <div>{{ message }}</div>
</template>

<script setup>
const message = 'Hello, world!';
</script>

<style>
div {
  color: red;
}
</style>

JSX：更加熟悉的语法

Vue3 支持 JSX 语法，这是一种类似于 React 的语法。JSX 可以让你以更熟悉的语法来编写 Vue 组件，并可以更好地利用 TypeScript 的类型系统。

// Vue2 JSX（使用库）
import Vue from 'vue-jsx';

@Vue
export default class MyComponent extends Vue {
  render() {
    return <div>Hello, world!</div>;
  }
}

// Vue3 原生 JSX
import { defineComponent } from 'vue';

export default defineComponent({
  render() {
    return <div>Hello, world!</div>;
  },
});

**Teleport：更加灵活的组件放置