Vue3 从零到全掌握：最详尽的入门指南（近万字超全内容）

一、Vue脚手架

Vue3官方文档地址：https://v3.cn.vuejs.org/

以前的官方脚手架@vue-cli也可以用，但这里推荐一个更轻快的脚手架Vite

脚手架网址：Vite中文网

方式一：vue-cli脚手架初始化Vue3项目
官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

//    查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
//    安装或者升级你的@vue/cli
npm install -g @vue/cli
//     创建
vue create vue_test
// 启动
cd vue_test
npm run serve

方式二：vite初始化Vue3项目
vite官网：https://vitejs.cn///     创建工程
npm init vite-app <project-name>
//    进入工程目录
cd <project-name>
//     安装依赖
npm install
//    运行
npm run dev

二、生命周期钩子函数

在 Vue 3 中，生命周期钩子函数相比于 Vue 2 有所改变，主要是通过 Composition API 来管理组件的生命周期。以下是 Vue 3 中常用的生命周期钩子函数，包括代码和注释：

<template>
  <div>
    <h2>Vue 3 生命周期钩子函数示例</h2>
    <p>{
  { message }}</p>
  </div>
</template>

<script>
import { onMounted, onUpdated, onUnmounted } from 'vue';

export default {
  data() {
    return {
      message: 'Hello Vue 3!'
    };
  },
  // 组件挂载后调用
  mounted() {
    console.log('Component mounted');
  },
  // 使用 Composition API 注册生命周期钩子
  setup() {
    // 在组件挂载后执行
    onMounted(() => {
      console.log('Component is mounted');
    });

    // 在组件更新后执行
    onUpdated(() => {
      console.log('Component is updated');
    });

    // 在组件销毁前执行
    onUnmounted(() => {
      console.log('Component is about to be unmounted');
    });

    // 返回数据和方法给模板使用
    return {};
  }
};
</script>

<style scoped>
/* 可选：组件私有的样式 */
</style>

生命周期钩子函数解释

1. Vue 3 的生命周期钩子函数:

   • Vue 3 中使用 Composition API 的函数来管理生命周期，比如 onMounted、onUpdated 和 onUnmounted。

2. setup 函数:

   • 使用 Composition API 时，组件选项中不再使用 mounted、updated 和 beforeUnmount 等生命周期钩子，而是在 setup 函数中使用函数式 API。
   • setup 函数在组件实例创建时执行，返回需要在模板中使用的数据和方法。

3. onMounted 钩子:

   • onMounted 在组件被挂载到 DOM 后调用，类似于 Vue 2.x 中的 mounted 钩子。
   • 在 onMounted 函数内部定义的代码将在组件挂载后执行。

4. onUpdated 钩子