当前位置：首页 > news >正文

跟着AI学习vue3第二章

news 来源：原创 2025/5/9 22:11:16

第二阶段：深入核心

1. Composition API

理解 Composition API 是啥

在 Vue 2 里，咱们写组件逻辑的时候，是把不同功能的代码分散在 data、methods、computed 这些不同的选项里。就好比你有一个工具箱，锤子、螺丝刀、扳手都被放在不同的小格子里。当组件逻辑越来越复杂，要找某个功能的代码就很麻烦。

而 Composition API 就像是给你一个新的整理方式，它可以把相关的逻辑都打包在一起。比如你要做一个跟表单验证相关的功能，用 Composition API 就可以把验证的代码都写在一个地方，方便管理和复用。

学会创建和使用组合函数

组合函数就是把一些逻辑封装起来的函数。举个例子，咱们要做一个计数器功能，每次点击按钮数字就加 1。

// 这是一个组合函数，专门用来处理计数器逻辑
import { ref } from 'vue';

export function useCounter() {
    // 创建一个响应式的变量 count，初始值为 0
    const count = ref(0);

    // 定义一个函数，用来让 count 的值加 1
    const increment = () => {
        count.value++;
    };

    // 把 count 和 increment 函数返回出去，这样其他地方就能用了
    return {
        count,
        increment
    };
}

然后在组件里使用这个组合函数：

<template>
    <div>
        <!-- 显示 count 的值 -->
        <p>{{ count }}</p>
        <!-- 点击按钮调用 increment 函数 -->
        <button @click="increment">增加</button>
    </div>
</template>

<script setup>
// 引入组合函数
import { useCounter } from './useCounter.js';

// 使用组合函数，得到 count 和 increment
const { count, increment } = useCounter();
</script>

这样，计数器的逻辑就被封装在 useCounter 函数里，以后其他组件也能用这个函数，实现代码复用。

掌握 `setup` 函数

setup 函数是 Composition API 的入口。当组件创建的时候，setup 函数就会先执行。在 setup 函数里，咱们可以使用响应式数据、生命周期钩子等。

<template>
    <div>
        <p>{{ message }}</p>
    </div>
</template>

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

// 创建一个响应式的 message 变量
const message = ref('Hello from setup!');
</script>

2. 生命周期钩子

生命周期钩子就像是组件的不同“人生阶段”，在这些阶段我们可以执行一些特定的代码。

认识各个生命周期钩子

onBeforeMount：在组件挂载到页面之前触发。就好比你要搬家，在东西还没搬到新家之前，你可以做一些准备工作，比如检查新家的水电是否正常。

<template>
    <div></div>
</template>

<script setup>
import { onBeforeMount } from 'vue';

onBeforeMount(() => {
    console.log('组件马上要挂载了，先做些准备');
});
</script>

onMounted：组件已经挂载到页面之后触发。就像你已经把东西搬到新家，并且都摆放好了，这时候可以开始在新家生活啦。

<template>
    <div></div>
</template>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
    console.log('组件已经挂载好，可以开始干活啦');
});
</script>

onBeforeUpdate：在组件数据更新之前触发。比如你要修改家里的家具摆放，在动手之前先计划一下怎么改。
onUpdated：组件数据更新之后触发。就像你已经把家具摆放好了，看看效果怎么样。
onBeforeUnmount：在组件销毁之前触发。就像你要搬离这个家，在走之前把东西整理一下。
onUnmounted：组件销毁之后触发。就像你已经搬离了这个家，这个家跟你没关系了。

3. 组件化开发

学会创建和使用组件

组件就像是一个个小零件，我们可以把一个大的页面拆分成很多小的组件，这样代码会更清晰，也更容易维护。

创建一个组件很简单，比如创建一个 HelloWorld 组件：

<!-- HelloWorld.vue -->
<template>
    <div>
        <h1>{{ message }}</h1>
    </div>
</template>

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

const message = ref('Hello, World!');
</script>

<style scoped>
h1 {
    color: blue;
}
</style>

然后在另一个组件里使用它：

<template>
    <div>
        <!-- 使用 HelloWorld 组件 -->
        <HelloWorld />
    </div>
</template>

<script setup>
// 引入 HelloWorld 组件
import HelloWorld from './HelloWorld.vue';
</script>

掌握组件之间的通信方式

props：就像是给组件传递参数。比如你有一个 UserInfo 组件，用来显示用户信息，你可以通过 props 把用户的姓名、年龄等信息传递给它。

<!-- UserInfo.vue -->
<template>
    <div>
        <p>姓名: {{ name }}</p>
        <p>年龄: {{ age }}</p>
    </div>
</template>

<script setup>
import { defineProps } from 'vue';

// 定义 props
const props = defineProps({
    name: String,
    age: Number
});
</script>

在使用 UserInfo 组件的时候传递参数：

<template>
    <div>
        <!-- 传递 name 和 age 参数 -->
        <UserInfo :name="userName" :age="userAge" />
    </div>
</template>

<script setup>
import { ref } from 'vue';
import UserInfo from './UserInfo.vue';

const userName = ref('张三');
const userAge = ref(25);
</script>

emit：子组件可以通过 emit 向父组件发送消息。比如子组件里有一个按钮，点击按钮时通知父组件做一些事情。

<!-- ChildComponent.vue -->
<template>
    <div>
        <button @click="sendMessage">点击我通知父组件</button>
    </div>
</template>

<script setup>
import { defineEmits } from 'vue';

// 定义可以触发的事件
const emits = defineEmits(['messageSent']);

const sendMessage = () => {
    // 触发 messageSent 事件，并传递数据
    emits('messageSent', '这是子组件发来的消息');
};
</script>

在父组件里监听这个事件：

<template>
    <div>
        <ChildComponent @messageSent="handleMessage" />
    </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';

const handleMessage = (message) => {
    console.log('收到子组件的消息:', message);
};
</script>

v-model：这是一种更简洁的双向数据绑定方式。比如有一个 InputComponent 组件，用来输入内容，使用 v-model 可以让父组件和子组件的数据保持同步。

<!-- InputComponent.vue -->
<template>
    <div>
        <input v-model="localValue" @input="updateValue">
    </div>
</template>

<script setup>
import { defineProps, defineEmits, ref } from 'vue';

const props = defineProps({
    modelValue: String
});

const emits = defineEmits(['update:modelValue']);

const localValue = ref(props.modelValue);

const updateValue = () => {
    emits('update:modelValue', localValue.value);
};
</script>

在父组件里使用：

<template>
    <div>
        <InputComponent v-model="inputText" />
        <p>输入的内容是: {{ inputText }}</p>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import InputComponent from './InputComponent.vue';

const inputText = ref('');
</script>

通过组件化开发，我们可以把一个复杂的项目拆分成一个个小的组件，每个组件负责自己的功能，这样代码的可维护性就大大提高了。