From 33f899940ef0debe17186fb0a0c25397ec4c0b09 Mon Sep 17 00:00:00 2001 From: 0019 <14280854+c_0019_1018@user.noreply.gitee.com> Date: Sun, 13 Apr 2025 22:53:43 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 0409/vue-API.txt | 110 ------------------ .../0407/vue.txt" | 0 ...7\346\234\254\346\226\207\346\241\243.txt" | 0 3 files changed, 110 deletions(-) delete mode 100644 0409/vue-API.txt rename 0407/vue.txt => "24\351\231\210\346\257\205/0407/vue.txt" (100%) rename "0411/\351\200\211\351\241\271\345\274\217\347\273\204\345\220\210.txt" => "24\351\231\210\346\257\205/0411/\346\226\260\345\273\272\346\226\207\346\234\254\346\226\207\346\241\243.txt" (100%) diff --git a/0409/vue-API.txt b/0409/vue-API.txt deleted file mode 100644 index 84c3c07..0000000 --- a/0409/vue-API.txt +++ /dev/null @@ -1,110 +0,0 @@ - 一、 Vue 3 组合式 API（Composition API） - 1. 定义 - 组合式 API 是 Vue 3 引入的一种新的组件定义方式，通过组合逻辑来组织代码，适合复杂组件和逻辑复用。 - - - 2. 核心概念 - - `setup` 函数：组合式 API 的入口，用于定义组件的逻辑。 - - 响应式数据：通过 `ref` 和 `reactive` 创建响应式数据。 - - 计算属性：通过 `computed` 创建计算属性。 - - 生命周期钩子：通过 `onMounted`、`onUpdated` 等直接在 `setup` 中使用。 - - 方法：在 `setup` 中定义方法，直接返回供模板使用。 - - - 3. 主要特点 - - - 逻辑复用：将逻辑拆分为可复用的函数。 - - 代码组织：按功能组织代码，而非生命周期。 - - 响应式系统：通过 `ref` 和 `reactive` 管理响应式数据。 - - - 4. 生命周期钩子 - - - `onBeforeMount`：挂载前执行。 - - `onMounted`：挂载后执行。 - - `onBeforeUpdate`：更新前执行。 - - `onUpdated`：更新后执行。 - - `onBeforeUnmount`：卸载前执行。 - - `onUnmounted`：卸载后执行。 - - - 5. 常用函数 - - - `ref`：创建一个响应式的引用值。 - - `reactive`：创建一个响应式的对象。 - - `computed`：创建计算属性。 - - `watch`：监听响应式数据的变化。 - - `watchEffect`：自动运行并响应式地监听依赖。 - - - 6. **组件通信** - - - 父子通信 - - 父组件通过 `props` 向子组件传递数据。 - - 子组件通过 `emit` 向父组件触发事件。 - - - 非父子通信 - - 使用事件总线或 Vuex 状态管理库。 - - - 7. **注意事项** - - - `setup` 的执行时机：在 `beforeCreate` 钩子之前执行。 - - 响应式数据的解构：直接解构会导致失去响应性，需使用 `toRefs`。 - - 生命周期钩子的使用：直接在 `setup` 中使用对应的生命周期钩子函数。 - - -二、 Vue 3 组合式 API 的“组合式糖” - - 1. **定义** - - “组合式糖”（Sugar API）是 Vue 3 中对组合式 API 的一种简化写法，旨在进一步简化组合式 API 的使用， -使其更接近选项式 API 的写法，同时保留组合式 API 的灵活性。 - - 2. **核心概念** - - - `defineComponent`：用于定义组件，提供类型推断支持。 - - `setup` 函数：组件逻辑的核心，支持直接返回对象，简化了响应式数据和方法的定义。 - - `props` 和 `emits`：在 `setup` 中直接声明 `props` 和 `emits`，更直观。 - - 生命周期钩子：直接在 `setup` 中使用，无需手动导入。 - - 3. 主要特点 - - - 简化声明：直接在 `setup` 中声明 `props` 和 `emits`，无需额外的 `props` 或 `emits` 选项。 - - 类型支持：通过 `defineComponent` 提供更好的类型推断支持。 - - 生命周期钩子：直接在 `setup` 中使用生命周期钩子，无需手动导入。 - - 响应式数据：直接在 `setup` 中定义响应式数据，无需手动使用 `ref` 或 `reactive`。 - - 4. **生命周期钩子** - - - `onBeforeMount`：挂载前执行。 - - `onMounted`：挂载后执行。 - - `onBeforeUpdate`：更新前执行。 - - `onUpdated`：更新后执行。 - - `onBeforeUnmount`：卸载前执行。 - - `onUnmounted`：卸载后执行。 - - 5. 常用函数 - - - `defineComponent`：用于定义组件，提供类型支持。 - - `setup`：组件逻辑的核心，支持直接返回对象。 - - `props` 和 `emits`：在 `setup` 中直接声明，更直观。 - - `ref` 和 `reactive`：用于创建响应式数据。 - - `computed`：用于创建计算属性。 - - `watch` 和 `watchEffect`：用于监听响应式数据的变化。 - - 6. 组件通信 - - - 父子通信 - - 父组件通过 `props` 向子组件传递数据。 - - 子组件通过 `emit` 向父组件触发事件。 - - - 非父子通信 - - 使用事件总线或 Vuex 状态管理库。 - - 7. 注意事项 - - - `setup` 的执行时机：在 `beforeCreate` 钩子之前执行。 - - 响应式数据的解构：直接解构会导致失去响应性，需使用 `toRefs`。 - - 生命周期钩子的使用：直接在 `setup` 中使用对应的生命周期钩子函数。 - - 类型支持：使用 `defineComponent` 提供更好的类型推断支持。 \ No newline at end of file diff --git a/0407/vue.txt "b/24\351\231\210\346\257\205/0407/vue.txt" similarity index 100% rename from 0407/vue.txt rename to "24\351\231\210\346\257\205/0407/vue.txt" diff --git "a/0411/\351\200\211\351\241\271\345\274\217\347\273\204\345\220\210.txt" "b/24\351\231\210\346\257\205/0411/\346\226\260\345\273\272\346\226\207\346\234\254\346\226\207\346\241\243.txt" similarity index 100% rename from "0411/\351\200\211\351\241\271\345\274\217\347\273\204\345\220\210.txt" rename to "24\351\231\210\346\257\205/0411/\346\226\260\345\273\272\346\226\207\346\234\254\346\226\207\346\241\243.txt" -- Gitee From d7f1b517c54c5399757dd96577a69e9ac84539d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=AF=85?= <14280854+c_0019_1018@user.noreply.gitee.com> Date: Mon, 14 Apr 2025 05:56:41 +0000 Subject: [PATCH 2/3] =?UTF-8?q?=E9=87=8D=E5=91=BD=E5=90=8D=2024=E9=99=88?= =?UTF-8?q?=E6=AF=85=20=E4=B8=BA=2024=20=E9=99=88=E6=AF=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../0407/vue.txt" => "24 \351\231\210\346\257\205/0407/vue.txt" | 0 ...5\273\272\346\226\207\346\234\254\346\226\207\346\241\243.txt" | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename "24\351\231\210\346\257\205/0407/vue.txt" => "24 \351\231\210\346\257\205/0407/vue.txt" (100%) rename "24\351\231\210\346\257\205/0411/\346\226\260\345\273\272\346\226\207\346\234\254\346\226\207\346\241\243.txt" => "24 \351\231\210\346\257\205/0411/\346\226\260\345\273\272\346\226\207\346\234\254\346\226\207\346\241\243.txt" (100%) diff --git "a/24\351\231\210\346\257\205/0407/vue.txt" "b/24 \351\231\210\346\257\205/0407/vue.txt" similarity index 100% rename from "24\351\231\210\346\257\205/0407/vue.txt" rename to "24 \351\231\210\346\257\205/0407/vue.txt" diff --git "a/24\351\231\210\346\257\205/0411/\346\226\260\345\273\272\346\226\207\346\234\254\346\226\207\346\241\243.txt" "b/24 \351\231\210\346\257\205/0411/\346\226\260\345\273\272\346\226\207\346\234\254\346\226\207\346\241\243.txt" similarity index 100% rename from "24\351\231\210\346\257\205/0411/\346\226\260\345\273\272\346\226\207\346\234\254\346\226\207\346\241\243.txt" rename to "24 \351\231\210\346\257\205/0411/\346\226\260\345\273\272\346\226\207\346\234\254\346\226\207\346\241\243.txt" -- Gitee From 4512614c6b33b203ad066aa81ed815eb51462029 Mon Sep 17 00:00:00 2001 From: 0019 <14280854+c_0019_1018@user.noreply.gitee.com> Date: Mon, 14 Apr 2025 19:38:38 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E6=9B=B4=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...1\346\235\277\350\257\255\346\263\225.txt" | 55 ++++++++ ...47\273\204\345\220\210\345\274\217API.txt" | 118 ++++++++++++++++++ 2 files changed, 173 insertions(+) create mode 100644 "24 \351\231\210\346\257\205/0409/\346\250\241\346\235\277\350\257\255\346\263\225.txt" create mode 100644 "24 \351\231\210\346\257\205/0411/\347\273\204\345\220\210\345\274\217API.txt" diff --git "a/24 \351\231\210\346\257\205/0409/\346\250\241\346\235\277\350\257\255\346\263\225.txt" "b/24 \351\231\210\346\257\205/0409/\346\250\241\346\235\277\350\257\255\346\263\225.txt" new file mode 100644 index 0000000..629c862 --- /dev/null +++ "b/24 \351\231\210\346\257\205/0409/\346\250\241\346\235\277\350\257\255\346\263\225.txt" @@ -0,0 +1,55 @@ + 1. 定义 + + 选项式模块是 Vue.js 中的一种组件定义方式，通过声明式的选项来组织组件的逻辑，适合初学者和简单项目。 + + + 2. 核心选项 + + - `data`：定义组件的响应式数据。 + - `methods`：定义组件的方法。 + - `computed`：定义计算属性，基于 `data` 的派生值。 + - `watch`：监听数据变化并执行操作。 + - `mounted`：挂载完成后执行的生命周期钩子。 + + + 3. 生命周期钩子 + + - `beforeCreate`：实例初始化后，数据观测和事件配置之前。 + - `created`：实例已创建，数据观测和事件配置完成。 + - `beforeMount`：挂载开始之前，模板编译完成。 + - `mounted`：挂载完成后，DOM 更新完成。 + - `beforeUpdate`：数据更新时，DOM 更新之前。 + - `updated`：DOM 更新完成后。 + - `beforeDestroy`：实例销毁之前。 + - `destroyed`：实例销毁后。 + + + 4. 模板语法 + + - 绑定数据：使用 `v-bind` 或简写 `:` + - 事件监听：使用 `v-on` 或简写 `@` + - 条件渲染：使用 `v-if`、`v-else-if`、`v-else` + - 列表渲染：使用 `v-for` + + + 5. **组件通信** + + - 父子通信 + - 父组件通过 `props` 向子组件传递数据。 + - 子组件通过 `$emit` 向父组件触发事件。 + + - 非父子通信 + - 使用事件总线或 Vuex 状态管理库。 + + + 6. 常用技巧 + + - `v-model`：实现双向绑定。 + - `key` 属性：确保列表渲染的性能和正确性。 + + + 7. 注意事项 + + - 响应式数据：`data` 必须是函数，返回一个对象。 + - 计算属性缓存：计算属性只有在相关依赖变化时才会重新计算。 + - 生命周期钩子顺序：理解生命周期钩子的执行顺序，避免在错误的阶段操作数据或 DOM。 \ No newline at end of file diff --git "a/24 \351\231\210\346\257\205/0411/\347\273\204\345\220\210\345\274\217API.txt" "b/24 \351\231\210\346\257\205/0411/\347\273\204\345\220\210\345\274\217API.txt" new file mode 100644 index 0000000..4f24622 --- /dev/null +++ "b/24 \351\231\210\346\257\205/0411/\347\273\204\345\220\210\345\274\217API.txt" @@ -0,0 +1,118 @@ + 一、 Vue 3 组合式 API（Composition API） + 1. 定义 + + 组合式 API 是 Vue 3 引入的一种新的组件定义方式，通过组合逻辑来组织代码，适合复杂组件和逻辑复用。 + + + 2. 核心概念 + + - `setup` 函数：组合式 API 的入口，用于定义组件的逻辑。 + - 响应式数据：通过 `ref` 和 `reactive` 创建响应式数据。 + - 计算属性：通过 `computed` 创建计算属性。 + - 生命周期钩子：通过 `onMounted`、`onUpdated` 等直接在 `setup` 中使用。 + - 方法：在 `setup` 中定义方法，直接返回供模板使用。 + + 3. 主要特点 + + - 逻辑复用：将逻辑拆分为可复用的函数。 + - 代码组织：按功能组织代码，而非生命周期。 + - 响应式系统：通过 `ref` 和 `reactive` 管理响应式数据。 + + + 4. 生命周期钩子 + + - `onBeforeMount`：挂载前执行。 + - `onMounted`：挂载后执行。 + - `onBeforeUpdate`：更新前执行。 + - `onUpdated`：更新后执行。 + - `onBeforeUnmount`：卸载前执行。 + - `onUnmounted`：卸载后执行。 + + + 5. 常用函数 + + - `ref`：创建一个响应式的引用值。 + - `reactive`：创建一个响应式的对象。 + - `computed`：创建计算属性。 + - `watch`：监听响应式数据的变化。 + - `watchEffect`：自动运行并响应式地监听依赖。 + + + 6. 组件通信 + + - 父子通信 + - 父组件通过 `props` 向子组件传递数据。 + - 子组件通过 `emit` 向父组件触发事件。 + + - 非父子通信 + - 使用事件总线或 Vuex 状态管理库。 + + + 7. 注意事项 + + - `setup` 的执行时机：在 `beforeCreate` 钩子之前执行。 + - 响应式数据的解构：直接解构会导致失去响应性，需使用 `toRefs`。 + - 生命周期钩子的使用：直接在 `setup` 中使用对应的生命周期钩子函数。 + + + Vue 3 组合式 API 的“组合式糖” + + + 1. 定义 + + “组合式糖”（Sugar API）是 Vue 3 中对组合式 API 的一种简化写法，旨在进一步简化组合式 API 的使用， +使其更接近选项式 API 的写法，同时保留组合式 API 的灵活性。 + + + 2. 核心概念 + + - `defineComponent`：用于定义组件，提供类型推断支持。 + - `setup` 函数：组件逻辑的核心，支持直接返回对象，简化了响应式数据和方法的定义。 + - `props` 和 `emits`：在 `setup` 中直接声明 `props` 和 `emits`，更直观。 + - 生命周期钩子：直接在 `setup` 中使用，无需手动导入。 + + + 3. 主要特点 + + - 简化声明：直接在 `setup` 中声明 `props` 和 `emits`，无需额外的 `props` 或 `emits` 选项。 + - 类型支持：通过 `defineComponent` 提供更好的类型推断支持。 + - 生命周期钩子：直接在 `setup` 中使用生命周期钩子，无需手动导入。 + - 响应式数据：直接在 `setup` 中定义响应式数据，无需手动使用 `ref` 或 `reactive`。 + + + 4. 生命周期钩子 + + - `onBeforeMount`：挂载前执行。 + - `onMounted`：挂载后执行。 + - `onBeforeUpdate`：更新前执行。 + - `onUpdated`：更新后执行。 + - `onBeforeUnmount`：卸载前执行。 + - `onUnmounted`：卸载后执行。 + + + 5. 常用函数 + + - `defineComponent`：用于定义组件，提供类型支持。 + - `setup`：组件逻辑的核心，支持直接返回对象。 + - `props` 和 `emits`：在 `setup` 中直接声明，更直观。 + - `ref` 和 `reactive`：用于创建响应式数据。 + - `computed`：用于创建计算属性。 + - `watch` 和 `watchEffect`：用于监听响应式数据的变化。 + + + 6. 组件通信 + + - 父子通信 + - 父组件通过 `props` 向子组件传递数据。 + - 子组件通过 `emit` 向父组件触发事件。 + + - 非父子通信 + - 使用事件总线或 Vuex 状态管理库。 + + + 7. 注意事项 + + - `setup` 的执行时机：在 `beforeCreate` 钩子之前执行。 + - 响应式数据的解构：直接解构会导致失去响应性，需使用 `toRefs`。 + - 生命周期钩子的使用：直接在 `setup` 中使用对应的生命周期钩子函数。 + - 类型支持：使用 `defineComponent` 提供更好的类型推断支持。 \ No newline at end of file -- Gitee