一、Vue 3 的基础语法

1. Vue 3 组件的基本结构

Vue 3 组件的基本结构与 Vue 2 很相似，但 Vue 3 更加强调 Composition API 的使用。下面是一个简单的 Vue 3 组件示例：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

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

export default {
  setup() {
    const message = ref('Hello, Vue 3!');
    const changeMessage = () => {
      message.value = 'Hello, World!';
    };

    return {
      message,
      changeMessage
    };
  }
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

在上面的示例中：

• ref 是 Vue 3 提供的一个 API，用于创建响应式数据。在 Composition API 中，我们不再使用 data 选项，而是使用 ref 来声明响应式数据。

• setup 函数是 Composition API 的核心，它在组件实例化之前调用，并且只能访问当前组件内定义的变量和函数。

2. 响应式数据与 reactive 和 ref

在 Vue 3 中，响应式数据的创建方式发生了变化。除了 ref，还有 reactive。

• ref 用于创建基本数据类型的响应式引用。例如：

  javascriptconst count = ref(0);
  

• reactive 用于创建对象或数组的响应式引用。例如：

  javascriptconst user = reactive({ name: 'John', age: 30 });
  

ref 和 reactive 都可以让我们在 Vue 3 中创建响应式数据，区别在于 ref 适用于基本类型数据，reactive 适用于对象和数组。

3. 计算属性与 computed

Vue 3 的 computed 和 Vue 2 的用法几乎相同，用于计算基于其他响应式数据的派生状态。例如：

javascriptimport { computed, ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);

    return {
      count,
      doubleCount
    };
  }
};

computed 会根据其依赖的响应式数据自动重新计算，并且会缓存计算结果，只有当依赖的数据发生变化时，才会重新计算。

二、Vue 3 的核心概念

除了基本的语法，Vue 3 还引入了一些新的核心概念，它们是理解 Vue 3 的关键。

1. watch 和 watchEffect

watch 用于观察响应式数据的变化，并在变化时执行特定的操作。而 watchEffect 会在组件的响应式数据变化时自动执行，且不需要显式地声明依赖。

javascriptimport { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newCount, oldCount) => {
  console.log(`count changed from ${oldCount} to ${newCount}`);
});

2. 生命周期钩子

Vue 3 中的生命周期钩子与 Vue 2 基本相同，但有些钩子的名字发生了变化。在 Vue 3 中，我们可以通过 Composition API 中的 onMounted、onUpdated 等钩子来替代 Vue 2 中的 mounted、updated。

例如：

javascriptimport { onMounted } from 'vue';

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

3. 动态组件与异步组件

Vue 3 支持通过 defineAsyncComponent 来定义异步组件。通过这种方式，我们可以懒加载组件，提升应用的性能。

import { defineAsyncComponent } from 'vue';

export default {
  components: {
    AsyncComponent: defineAsyncComponent(() => import('./AsyncComponent.vue'))
  }
};