尤雨溪带你快速掌握Vue 3

创作时间:

2025-01-22 00:55:35

作者:

@小白创作中心

尤雨溪带你快速掌握Vue 3

Vue.js自2014年首次发布以来，就以其简洁的API和强大的功能赢得了广大前端开发者的青睐。2020年9月，Vue 3正式发布，带来了诸多重大改进和新特性，进一步巩固了其在前端框架中的地位。本文将带你快速掌握Vue 3的核心概念和新特性，从基础入门到实战应用，全面了解Vue 3的强大功能。

Vue 3的核心改进

Vue 3相比Vue 2，主要在以下几个方面进行了重大改进：

响应式系统重构：采用ES6 Proxy替代Object.defineProperty，实现更高效、更全面的数据拦截机制。
引入Composition API：提供更灵活的逻辑复用方式，使代码组织更加清晰。
性能优化：优化模板编译器和虚拟DOM算法，提升渲染性能。
原生TypeScript支持：提供完整的类型声明文件，增强静态类型检查能力。

响应式系统：Proxy vs Object.defineProperty

Vue 3最核心的改进之一就是响应式系统的重构。Vue 2使用Object.defineProperty来实现数据的响应式，但这种方法存在一些局限性：

无法监听数组变化
无法监听对象属性的添加和删除
需要递归遍历对象的所有属性

Vue 3则采用了ES6的Proxy来实现响应式系统，解决了上述问题。Proxy可以拦截整个对象的操作，包括属性的读取、设置、删除等，提供了更全面的数据拦截能力。

const obj = reactive({
  name: 'Vue 3',
  version: 3
});

// 监听属性读取
const handler = {
  get(target, prop) {
    console.log(`Getting ${prop}`);
    return target[prop];
  }
};

const proxy = new Proxy(obj, handler);
console.log(proxy.name); // 输出：Getting name

Composition API：更灵活的逻辑复用方式

Vue 3引入的Composition API是其最具革命性的特性之一。它允许开发者在组件中更灵活地组织和复用逻辑，解决了传统选项式API在复杂组件中难以管理的问题。

Composition API的核心是setup()函数，它在组件创建之前执行，可以返回组件需要的响应式数据、计算属性、方法等。此外，Vue 3还提供了ref、reactive、computed、watch等API，使开发者能够更灵活地管理组件状态。

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);

    onMounted(() => {
      console.log('Component is mounted!');
    });

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};

Vue 3.4新特性：defineModel和v-bind语法糖

Vue 3.4版本带来了两个重要的新特性：defineModel宏和v-bind语法糖，进一步简化了开发流程。

defineModel宏

在Vue 3.4之前，使用v-model实现双向绑定需要在子组件中定义modelValue prop和update:modelValue emit。Vue 3.4引入的defineModel宏简化了这一过程，使代码更加简洁。

<template>
  <div>{{ model }}</div>
  <button @click="changeModel">加一</button>
</template>

<script setup lang="ts">
const model = defineModel({ type: Number, default: 0 });

const changeModel = () => {
  model.value++;
};
</script>

v-bind语法糖

Vue 3.4还引入了v-bind的语法糖，当绑定的属性名和脚本中定义的变量名一致时，可以省略等号右侧的变量名。

<template>
  <img :src :alt>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const src = ref('https://picsum.photos/200/300');
const alt = ref('alt');
</script>

实战示例：使用Composition API重构组件

让我们通过一个具体的例子，看看如何使用Composition API重构一个传统组件。

传统组件写法

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

使用Composition API重构

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};