渐进式前端框架Vue3

Vue.js 是一款非常流行的 JavaScript 前端框架，主要用于构建用户界面。Vue 3 是 Vue.js 的最新版本，带来了许多重要的新特性和性能优化。以下是一些关于 Vue 3 的学习笔记：

1. Vue 3 基本介绍

Vue 3 是一个轻量级、高性能的 JavaScript 框架，用于构建用户界面。它使用虚拟 DOM 技术，并提供了响应式数据绑定、组件化和指令等功能。

2. 安装 Vue 3

要在项目中使用 Vue 3，可以使用 npm 或 yarn 安装。

npm install -g vue

或者

yarn global add vue

3. 创建 Vue 3 项目

使用 vue create 命令创建一个新的 Vue 3 项目。

vue create my-project

这将引导你选择一些配置选项，如使用哪些 CSS 预处理器、是否使用代码分割等。

4. 数据绑定

Vue 3 的数据绑定仍然使用单向数据流的方式，这意味着只能从父组件向子组件传递数据。

<template>
  <div>
    <p>{{ message }}</p>
    <child-component :message="newMessage"></child-component>
  </div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
  data() {
    return {
      message: 'Hello Vue 3!',
      newMessage: 'I am a new message',
    };
  },
});
</script>

5. 计算属性和侦听器

在 Vue 3 中，计算属性和侦听器可以使用相同的语法，包括异步操作。

<template>
  <div>
    <p>{{ fullName }}</p>
    <button @click="updateName">Update Name</button>
  </div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    },
  },
  methods: {
    updateName() {
      this.firstName = 'John';
      if (this.lastName) {
        this.lastName = 'Doe';
      }
    },
  },
});
</script>

6. 组件

Vue 3 中的组件依然是使用 <component> 标签创建的，并且可以使用 props 向子组件传递数据。

<template>
  <div>
    <my-component :message="helloWorld"></my-component>
  </div>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default defineComponent({
  components: {
    MyComponent,
  },
  data() {
    return {
      helloWorld: 'Hello, Vue 3!',
    };
  },
});
</script>

7. 动态组件

使用 <component> 标签的 is 属性可以动态切换组件。

<template>
  <div>
    <component :is="componentName"></component>
  </div>
</template>
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
export default defineComponent({
  components: {
    ComponentA,
    ComponentB,
  },
  data() {
    return {
      componentName: 'ComponentA',
    };
  },
});
</script>

8. 生命周期钩子

Vue 3 仍然保留了一些生命周期钩子，但也有一些已经被移除或改名。

例如，beforeCreate 和 created 现在被合并为 setup，beforeMount 和 mounted 合并为 onMounted，beforeUpdate 和 updated 合并为 onUpdated，beforeDestroy 和 destroyed 合并为 onBeforeUnmount 和 onUnmounted。这些钩子函数被用来在组件生命周期的不同阶段执行某些特定的操作，例如在组件挂载前获取数据，在组件销毁前清除定时器等等。

<template>
  <div>
    {{ message }}
  </div>
</template>
<script>
export default defineComponent({
  data() {
    return {
      message: 'Hello, Vue 3!',
    };
  },
  setup() {
    // 在组件挂载前获取数据
    const fetchData = () => {
      // ...
    };
    onMounted(fetchData);

const timer = setInterval(() => {
  // ...
}, 1000);
onBeforeUnmount(() => {
  clearInterval(timer);
});
// 在组件更新前执行操作
const beforeUpdateHandler = () => {
  // ...
};
onBeforeUpdate(beforeUpdateHandler);
// 在组件更新后执行操作
const afterUpdateHandler = () => {
  // ...
};
onUpdated(afterUpdateHandler);
return {
  // 在 setup 函数中返回组件的数据和方法
  message: 'Hello, Vue 3!',
};

在 Vue 3 中，生命周期钩子函数的命名方式和使用方式都发生了一些变化。beforeCreate 和 created 被合并为 setup 函数，在 setup 函数中可以使用 Vue 2 中的 data 和 methods 等选项。beforeMount 和 mounted 合并为 onMounted 函数，在此函数中可以执行在组件挂载前需要进行的操作。beforeUpdate 和 updated 合并为 onUpdated 函数，在此函数中可以执行在组件更新后需要进行的操作。beforeDestroy 和 destroyed 合并为 onBeforeUnmount 和 onUnmounted 函数，在此函数中可以执行在组件销毁前需要进行的操作。

在 setup 函数中，可以返回一个对象，这个对象中包含组件的数据和方法。其中，return 语句中的对象就相当于 Vue 2 中的 data 选项。使用 onMounted 函数可以在组件挂载前获取数据，使用 onBeforeUnmount 函数可以在组件销毁前清除定时器等需要清理的操作。在 onBeforeUpdate 函数中可以执行在组件更新前需要进行的操作，在 onUpdated 函数中可以执行在组件更新后需要进行的操作。

总之，在 Vue 3 中，通过使用合并后的生命周期钩子函数可以更加方便地执行一些特定的操作，同时也避免了过多的重复代码。