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 钩子:

   • onUpdated 在组件更新后调用，类似于 Vue 2.x 中的 updated 钩子。
   • 在 onUpdated 函数内部定义的代码将在每次组件更新时执行。

5. onUnmounted 钩子:

   • onUnmounted 在组件即将被销毁前调用，类似于 Vue 2.x 中的 beforeUnmount 钩子。
   • 在 onUnmounted 函数内部定义的代码将在组件销毁前执行清理操作。

通过以上示例和解释，你可以更好地理解 Vue 3 中如何使用 Composition API 来管理组件的生命周期，并在需要的时候执行相应的操作。

三、ref方法的几种使用方式

在 Vue 3 中，ref 是用来创建响应式数据的函数，用于在组件中保存和操作 DOM 元素、计数器等简单数据。以下是几种常见的 ref 使用方式，包括代码和注释：

1. 基本用法

<template>
  <div>
    <h2>Vue 3 ref 基本用法</h2>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default {
  setup() {
    // 创建一个名为 count 的响应式数据
    const count = ref(0);

    // 定义一个增加 count 的方法
    const increment = () => {
      count.value++;
    };

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

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

注释：

• ref 函数用来创建一个响应式引用，初始值为 0。
• count.value 访问和修改 ref 创建的响应式数据。
• increment 方法增加 count 的值，每次点击按钮时触发。

2. DOM 元素引用

<template>
  <div>
    <h2>Vue 3 ref 获取 DOM 元素</h2>
    <button @click="focusInput">Focus Input</button>
    <input type="text" ref="inputRef" />
  </div>
</template>

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

export default {
  setup() {
    // 创建一个 ref 来引用 input 元素
    const inputRef = ref(null);

    // 在组件挂载后获取到 input 元素的引用
    onMounted(() => {
      console.log(inputRef.value); // 输出 input 元素的 DOM 对象
    });

    // 定义一个方法，用来聚焦 input 元素
    const focusInput = () => {
      inputRef.value.focus();
    };

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

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

 

注释：

• ref 创建的 inputRef 用来引用 <input> 元素。
• onMounted 钩子函数在组件挂载后调用，此时可以访问 inputRef.value 获取到真实的 DOM 元素。
• focusInput 方法通过 inputRef.value.focus() 聚焦到 <input> 元素。

3. 对象引用

<template>
  <div>
    <h2>Vue 3 ref 对象引用</h2>
    <p>Name: {{ person.name }}</p>
    <button @click="changeName">Change Name</button>
  </div>
</template>

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

export default {
  setup() {
    // 创建一个包含对象的 ref
    const person = ref({ name: 'John' });

    // 定义一个方法，用来修改 person 对象的 name 属性
    const changeName = () => {
      person.value.name = 'Jane';
    };

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

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

注释：

• ref 创建的 person 是一个包含对象 { name: 'John' } 的响应式数据。
• person.value.name 可以访问和修改对象属性。
• changeName 方法用来改变 person.value.name 的值，从 'John' 变为 'Jane'。

通过这些示例，你可以了解如何在 Vue 3 中使用 ref 函数来管理简单的数据、DOM 元素引用以及对象引用，并且在 Composition API 中的应用方式。

 四、reacttive方法和toRefs方法

在 Vue 3 中，reactive 和 toRefs 是 Composition API 中用来创建和处理响应式数据的两个重要方法。下面我将为你展示它们的用法，并附上详细的注释。

1. reactive 方法

<template>
  <div>
    <h2>Vue 3 reactive 方法</h2>
    <p>Person: {{ person.name }}, Age: {{ person.age }}</p>
    <button @click="updatePerson">Update Person</button>
  </div>
</template>

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

export default {
  setup() {
    // 使用 reactive 方法创建一个响应式对象
    const person = reactive({
      name: 'John',
      age: 30
    });

    // 定义一个更新 person 对象的方法
    const updatePerson = () => {
      person.name = 'Jane';
      person.age += 1;
    };

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

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

注释：

• reactive 方法用来创建一个包含响应式数据的对象 person。
• person.name 和 person.age 可以在模板中直接使用，并且会自动响应数据的变化。
• updatePerson 方法修改 person 对象的属性，任何改变都会在页面上自动更新。

2. toRefs 方法

<template>
  <div>
    <h2>Vue 3 toRefs 方法</h2>
    <p>Product: {{ product.name }}, Price: {{ product.price }}</p>
    <button @click="updateProduct">Update Product</button>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue';

export default {
  setup() {
    // 使用 reactive 方法创建一个响应式对象
    const product = reactive({
      name: 'Keyboard',
      price: 50
    });

    // 使用 toRefs 将 reactive 对象转换为普通对象的 ref
    const productRefs = toRefs(product);

    // 定义一个更新 product 对象的方法
    const updateProduct = () => {
      product.name = 'Mouse';
      product.price += 10;
    };

    // 返回数据和方法给模板使用
    return {
      ...productRefs, // 解构 productRefs 对象，使其成为响应式数据
      updateProduct
    };
  }
};
</script>

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

 

注释：

• reactive 方法创建一个响应式对象 product，包含 name 和 price 属性。
• toRefs 方法将 reactive 对象转换为普通对象的 ref，这样可以在模板中使用 product.name 和 product.price。
• updateProduct 方法修改 product 对象的属性，页面会自动更新 name 和 price 的显示。

通过 reactive 和 toRefs 方法，可以有效地管理和操作组件中的响应式数据，从而实现数据的动态更新和页面的重新渲染。

五、setup语法糖

之前写的setup语法糖其实可以简写：

<template>
    <div>
        <p>{{num}}</p>
        <button @click="num++">按钮</button>
    </div>
</template>

<script lang='ts' setup>
import { reactive,toRefs } from "Vue"

let obj = reactive({
    num:9
})

let {num} = toRefs(reactive(obj))
</script>

六、watch属性和watchEffect属性

在Vue 3中，watch和watchEffect都是用来响应式地监视数据变化并执行相应逻辑的功能。它们的使用方式和作用略有不同，下面是它们的代码示例和注释：

import { reactive, watch, watchEffect } from 'vue';

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

// 使用watch来监视特定的响应式数据变化
watch(
  () => state.count, // 监视的数据源，可以是一个getter函数
  (newValue, oldValue) => {
    console.log(`count变化了：新值为${newValue}，旧值为${oldValue}`);
    state.doubleCount = newValue * 2; // 更新另一个响应式数据
  }
);

// 使用watchEffect来监视数据变化并执行副作用
watchEffect(() => {
  console.log(`count的值是：${state.count}`);
  // 此处可以写一些副作用逻辑，它会在count变化时自动运行
});

// 模拟数据变化
setTimeout(() => {
  state.count++;
}, 1000);

注释解释：

1. watch示例：

   • watch接受两个参数：第一个参数是一个getter函数，它返回要监视的响应式数据；第二个参数是一个回调函数，当监视的数据变化时会被调用。
   • 在这个例子中，我们监视state.count的变化，一旦它变化，就会打印新旧值，并更新state.doubleCount为state.count的两倍。

2. watchEffect示例：

   • watchEffect接受一个函数作为参数，这个函数内部包含了需要执行的副作用逻辑。
   • 不像watch那样需要显式地指定依赖，watchEffect会自动追踪其内部使用的所有响应式数据，当这些数据变化时，函数会重新运行。

3. 模拟数据变化：

   • 我们使用setTimeout来模拟state.count的变化。在一秒钟后，state.count增加1，这将触发watchEffect内部的打印逻辑和watch的回调函数。

这些功能使得Vue 3能够更加灵活地处理数据变化和副作用，从而构建响应式的用户界面和数据驱动的应用程序。

 

七、Computed属性

在Vue 3中，computed属性用于定义一个基于响应式数据计算得出的属性，它会根据其依赖的响应式数据自动更新。下面是一个示例代码和相应的注释：

import { reactive, computed } from 'vue';

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

// 定义一个computed属性
const doubleCount = computed(() => {
  return state.count * 2; // 根据state.count计算得出doubleCount
});

// 模拟数据变化
setTimeout(() => {
  state.count++;
}, 1000);

// 打印computed属性的值
console.log(doubleCount.value); // 初始值为0，因为count还没有变化

// 监听computed属性的变化
watchEffect(() => {
  console.log(`doubleCount的值是：${doubleCount.value}`);
});

// 模拟数据变化后再次打印computed属性的值
setTimeout(() => {
  console.log(doubleCount.value); // 输出变为2，因为count变为1后，doubleCount更新为2
}, 2000);

注释解释：

1. 定义computed属性：

   • 使用computed函数来定义一个计算属性doubleCount，它接受一个函数作为参数，这个函数返回计算后的值。
   • 在这个例子中，doubleCount是state.count的两倍。

2. 访问computed属性：

   • 计算属性的值可以通过.value来访问。初始时，doubleCount.value为0，因为state.count初始值为0。

3. 模拟数据变化：

   • 使用setTimeout来模拟state.count的变化。一秒后，state.count增加1，这会触发doubleCount的重新计算。

4. 监听computed属性的变化：

   • 使用watchEffect来监听doubleCount的变化。每当doubleCount发生变化时，打印其值。

5. 再次打印computed属性的值：

   • 两秒后再次打印doubleCount.value，它会输出2，因为在第二秒时，state.count变为1，所以doubleCount被重新计算为2。

通过computed属性，Vue 3能够自动追踪依赖关系，只有在其依赖的响应式数据变化时才重新计算，从而提高了性能和代码的清晰度。