【前端Vue3】——Vue基础知识点总结（万字总结）

在现代前端开发中，Vue.js是一种极具人气的框架，尤其是其第三个版本（Vue 3）引入了许多新的特性和改进。本文将对Vue 3的一些基础知识点进行总结，并提供对应的代码示例。

1. 响应式系统

Vue 3 引入了 Proxy API，使得响应式系统的性能和功能得到了极大的提升。在Vue中，当数据发生变化时，视图会自动更新。

import { reactive } from 'vue';

const state = reactive({
    count: 0
});

// 通过修改 state.count 来触发更新
function increment() {
    state.count++;
}

在这个示例中，我们通过 reactive 函数创建了一个响应式状态对象 state。当我们修改 state.count 的值时，依赖这个值的视图会自动重新渲染。

2. Composition API

Vue 3 提供了全新的 Composition API，使得功能逻辑的复用变得更加简单。通过 setup 函数，开发者可以更灵活地组织代码。

<template>
  <div>
    <p>计数: {{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
import { ref } from 'vue';

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

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

    return {
      count,
      increment
    };
  }
};
</script>

在这个例子中，我们使用 ref 函数来创建一个响应式的数据引用 count，并通过 increment 方法增加其值。模板中可以直接使用 count。

3. 生命周期钩子

Vue 3 提供了一系列的生命周期钩子，可以对组件的创建、更新、销毁等过程进行控制。

import { onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载');
    });

    onBeforeUnmount(() => {
      console.log('组件即将卸载');
    });
  }
};

在这个示例中，onMounted 和 onBeforeUnmount 这两个钩子函数用来处理组件的生命周期事件，可以非常方便地执行相关的逻辑。

4. 计算属性和侦听器

计算属性（computed）和观察属性（watch）使得数据处理得以更加动态和高效。

import { ref, computed, watch } from 'vue';

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

    const doubledCount = computed(() => {
      return count.value * 2;
    });

    watch(count, (newValue) => {
      console.log(`计数改变为: ${newValue}`);
    });

    return {
      count,
      doubledCount
    };
  }
};

在这个例子中，computed 用于创建一个计算属性 doubledCount，其值为 count 的两倍。watch 用来监听 count 的变化并输出变化的信息。

5. 组件和 Props

在Vue中，组件是最基本的构建单元，Props用于向子组件传递数据。

// 子组件
export default {
  props: {
    title: {
      type: String,
      required: true
    }
  },
  template: `<h1>{{ title }}</h1>`
};

// 父组件
<template>
  <ChildComponent title="Hello Vue 3!" />
</template>

这里，子组件通过 props 接收来自父组件的数据 title。这种机制使得组件之间的通信变得简单清晰。

结论

Vue 3通过引入Composition API、响应式系统增强、生命周期钩子、计算属性与侦听器等特性，使得开发者能够更加灵活、模块化地构建应用。这些特性不仅提升了代码的可读性和可维护性，也使得开发者的工作效率得到了显著的提高。掌握这些基础知识点，能够帮助新手更快地上手Vue 3的开发，打造出更为丰富的前端应用。