自学内容网 自学内容网
自学内容网 > 正文

2024 年最新前端工程师 Vue3 框架详细教程（更新中）

🕗 发布于 2024-09-23 20:56 前端  

vue3 前端框架概述

vue 3 是 Vue.js 的最新版本，是一个用于构建用户界面的渐进式 JavaScript 框架。和 vue 2 相比，vue 3 引入了组合式 API，使开发者可以通过函数组织代码逻辑，适合处理复杂功能。vue 3 在性能上也有显著提升，特别是在大型应用中。

vue 3 利用了 Proxy 对象来实现响应式数据，替代了 vue 2 中的 Object.defineProperty，从而提高了性能和灵活性。vue 3 的 Tree-shaking 功能使得未使用的代码不会被打包，降低了打包体积。vue 3 还增强了 TypeScript 支持，提升了开发体验。新的渲染机制改善了应用的运行效率，并且 vue 3 支持自定义渲染器，能够轻松构建不同平台上的应用。

vue 官方网站：https://vuejs.org/

在这里插入图片描述
Tree-shaking 树摇

Tree-shaking 是一种用于移除 JavaScript 应用中未使用代码的优化技术。它通过静态分析模块的依赖关系，只将实际使用到的代码打包到最终的输出文件中，而未引用的部分则被 “摇掉” (移除)，从而减少打包体积，提升应用性能。

vue 3 核心库经过优化，支持 Tree-shaking。这意味着如果你只使用 Vue 中的某些功能模块，未使用的部分不会被打包到最终文件中，从而减小应用的体积。这在构建大型应用时尤为重要。Tree-shaking 是在构建工具（如 Webpack、Vite、Rollup）中实现的，它们会分析代码并自动移除未使用的部分。

vite 前端构建工具

Vite 是一种新型前端构建工具，专为现代开发而设计，提供极速的开发服务器和快速的构建。和传统的打包工具不同，Vite 利用浏览器原生 ES 模块进行按需加载，大幅缩短了开发环境中的启动时间。它通过 ESBuild 进行预打包，速度非常快。Vite 同时支持 Vue、React、Svelte 等现代框架，具有优秀的插件生态。其生产环境下的构建过程也采用 Rollup，确保高效打包和代码拆分，适用于从小型项目到大型应用的开发。

vite 官方网站：https://vitejs.dev/

在这里插入图片描述
安装 vite 前端构建工具

npm install vite --save-dev

Vite 和 Webpack 区别

特性ViteWebpack
启动速度利用浏览器原生 ES 模块，启动极快，无需完整打包启动时需要完整打包，尤其在大型项目中启动较慢
打包方式开发环境不打包，生产环境使用 Rollup 进行优化打包无论开发还是生产模式，都通过 loaders 和 plugins 完整打包
热模块替换 (HMR)基于原生 ES 模块，HMR 速度非常快支持 HMR，但更新速度比 Vite 慢，需处理模块依赖链
依赖处理使用 ESBuild 预构建依赖，处理速度极快传统的 JavaScript 打包方式，处理依赖相对较慢
配置配置简洁，开箱即用，适合现代框架（Vue、React 等）功能强大，支持广泛，配置复杂，适合复杂的项目
生态系统新兴但发展迅速，特别适合 Vue 3、React 等现代框架生态系统成熟，适用于复杂的企业级应用，社区资源丰富
生产环境打包使用 Rollup，具有高效的代码拆分和 Tree-shaking使用自身机制，支持各种优化，适合复杂应用的打包
依赖预构建使用 ESBuild 进行预构建，速度比传统方法快 10 到 100 倍传统方式处理依赖，速度相对较慢
适用场景小型到中型项目，追求快速开发和高效热更新大型、复杂项目，支持更广泛的功能和场景

使用 vite 创建项目流程

1. 使用 npm 安装 Vite

首先确保你已经安装了 Node.js，然后可以使用以下命令快速安装并创建一个 Vite 项目。

npm create vite@latest

2. 设置项目名称

运行命令后，Vite 会提示你设置项目名称。

✔ Project name: … my-vite-project

3. 选择模板

接下来 Vite 会让你选择一个框架模板。选择你需要的框架（例如 Vue、React 或 Vanilla JavaScript）。

✔ Select a framework: » 
  - Vanilla
  - Vue
  - React
  - Svelte
  - Preact
  - Lit
  - Others

4. cd 项目目录、安装依赖

项目创建完成后，进入项目目录并安装依赖。

cd my-vite-project
npm install

5. 启动开发服务器

安装完依赖后，可以启动 Vite 开发服务器。

npm run dev

开发服务器会自动启动，并通过 http://localhost:5173 提供服务，你可以在浏览器中访问该地址查看项目。

6. 构建项目（生产环境）

当你准备将项目发布到生产环境时，可以使用以下命令进行构建。构建完成后，生成的文件会放在 dist 文件夹中。

npm run build

使用 npm 创建 vue3 项目

D:\linenazi> npm create vue@latest

Vue.js - The Progressive JavaScript Framework

√ Project name: ... linenazi-project
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
√ Add Vue DevTools 7 extension for debugging? (experimental) ... No / Yes

Scaffolding project in D:\linenazi\linenazi-project...

Done. Now run:

  cd linenazi-project
  npm install
  npm run dev

初始化项目：安装 node_modules 依赖

npm i

编辑器 .vscode 设置

.vscode 是 Visual Studio Code (VS Code) 编辑器的一个隐藏文件夹，用于存储与特定工作区相关的配置和设置。这个文件夹通常位于项目根目录中。.vscode 文件夹提供了一种方式来为特定项目自定义 VS Code 的行为和外观，使得团队协作时能够保持一致的开发环境，提升开发效率。

工作区设置

.vscode/settings.json：该文件可以用于定义项目特定的设置，例如代码格式化规则、主题、文件编码等。这些设置只适用于该项目，而不会影响全局配置。

扩展推荐

.vscode/extensions.json：这个文件可以列出推荐的扩展，使团队成员在打开项目时能够看到建议安装的扩展，提升开发体验。

调试配置

.vscode/launch.json：用于配置调试器的设置，定义如何启动和调试应用程序。你可以指定调试的程序、参数、环境变量等。

任务配置

.vscode/tasks.json：可以定义常用的任务（例如构建、测试、运行脚本等），让你可以通过 VS Code 的任务面板轻松执行这些任务。

代码片段

.vscode/snippets 文件夹：可以存放自定义代码片段文件，方便在编写代码时快速插入常用代码块。

键盘快捷键

.vscode/keybindings.json：可以存放自定义的键盘快捷键设置，适用于该工作区。

使用 npm i 安装依赖流程

npm i 是 npm install 的简写，通常用于安装项目的依赖包。npm install 是 Node.js 包管理工具 npm 的一个常见命令，执行时会根据项目中的 package.json 文件安装所需的依赖。npm i 是一个快捷命令，用于安装项目的依赖包，确保项目能够在开发或生产环境中正常运行。

1. 安装项目依赖

npm i 会根据项目根目录中的 package.json 文件安装所有列出的依赖项。

dependencies：应用程序运行时所需的依赖包。
devDependencies：开发环境中使用的依赖包（如测试框架、构建工具等）。

2. 生成或更新 node_modules 文件夹

安装完成后，npm i 会在项目目录下生成一个 node_modules 文件夹，里面包含所有安装的依赖包及其依赖项。如果该文件夹已经存在，npm i 会检查并更新依赖包版本。

3. 生成或更新 package-lock.json

当运行 npm i 时，npm 会根据安装的具体版本生成或更新 package-lock.json 文件，该文件记录了确切的包版本信息，确保团队中的每个人安装的包版本一致。

4. 安装指定版本的依赖

你也可以通过 npm i <package> 来安装特定的依赖包。例如，npm i lodash 会安装最新版本的 lodash，而 npm i lodash@4.17.21 会安装指定版本。

5. 安装全局包

如果使用 -g 选项，例如 npm i -g typescript，该包将被全局安装，这意味着你可以在系统的任何地方使用该包。

6. 自动安装缺失的依赖

当 node_modules 文件夹丢失或者某些依赖没有安装时，运行 npm i 会自动安装这些缺失的依赖，确保项目正常运行。

vite.config.ts 配置

官方文档地址：https://vitejs.dev/config/

在这里插入图片描述

Vue 3 应用程序的标准启动方式，它展示了如何创建一个 Vue 应用并将其挂载到页面上。通过这种方式，Vue 能够在指定的 DOM 节点中渲染组件，实现动态的用户界面。

1. Vue createApp 工厂函数

createApp 是 Vue 3 中用于创建应用实例的工厂函数，它接受一个根组件作为参数，并返回一个应用实例对象。该对象提供了一系列方法用于配置和挂载应用，比如 mount 方法将应用挂载到指定的 DOM 元素上。createApp 允许开发者在应用级别上注册全局配置和插件，支持使用 Composition API 来管理组件状态和逻辑。它是 Vue 3 应用的入口点，简化了应用的创建和管理过程，使得开发者可以更加灵活地构建复杂的用户界面。

从 vue 包中导入 createApp 函数。createApp 是用来创建 Vue 应用实例的函数。

import { createApp } from 'vue';

2. App 根组件

App 根组件是 Vue 应用的主要组件，通常用于定义应用的结构、布局和基本逻辑。它是整个 Vue 应用的入口点，包含了其他子组件并负责管理它们的状态和行为。

这里导入了根组件 App，它是一个 Vue 组件，通常是应用程序的主要部分，包含了应用的模板、逻辑和样式。

import App from './App.vue';

3. 创建并挂载应用

createApp(App).mount('#app');

createApp(App)：使用 createApp 函数创建一个 Vue 应用实例，并传入根组件 App。

.mount('#app')：将创建的 Vue 应用挂载到 DOM 中 id 为 app 的元素上。这意味着 Vue 会控制这个元素及其子元素，提供响应式数据绑定和组件功能。

Chrome vue.js devtools

Chrome Vue.js Devtools 是一个浏览器扩展，专为 Vue.js 应用程序开发和调试设计。它提供了一个直观的用户界面，允许开发者实时查看和修改 Vue 组件的状态、属性和事件。

主要功能包括：组件树视图，展示应用的组件结构和层级；状态查看，实时监控组件的数据和计算属性；事件跟踪，查看组件之间的事件通信；时间旅行调试，支持在状态变化间回退；以及 Vuex 状态管理的集成，便于监控和调试状态管理流。通过这些工具，开发者可以更高效地调试和优化 Vue 应用，提高开发体验。

在这里插入图片描述

插件官方地址：https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN&utm_source=ext_sidebar

Composition API

Composition API 是 Vue 3 引入的一种更灵活、更可复用的编写组件逻辑的方法。它通过 setup() 函数将组件的逻辑按功能组织，而不是像 Options API 那样按 data、methods、computed 等选项分散逻辑。

Options API 和 Composition API 区别

特性Options APIComposition API
写法使用 data、methods、computed 等选项组织逻辑使用 setup() 函数，通过组合函数组织逻辑
逻辑组织逻辑通常是按功能分割，难以跨选项共享状态逻辑可以按特性分组，跨功能共享逻辑和状态变得更容易
灵活性灵活性较低，状态和方法在各个选项中分散更加灵活，允许将逻辑和状态提取为可复用的独立函数
代码复用依赖 mixins 和 extends，可能导致命名冲突和难以追踪通过组合函数（Composable），更容易复用和共享逻辑
TypeScript 支持对 TypeScript 的支持较弱，类型推断复杂与 TypeScript 兼容性更好，类型推断更清晰
学习曲线对初学者更友好，易于上手需要更深入的 JavaScript 知识，学习曲线较陡
状态响应式响应式状态由 Vue 自动处理手动使用 ref 和 reactive 创建响应式状态
代码结构代码结构清晰，但大型组件会导致多个选项分散逻辑逻辑更加集中，大型组件的逻辑组织更清晰
性能优化Vue 内部自动优化开发者可以更精细地控制性能优化（如懒加载、依赖收集等）

setup 函数概述

setup 函数是 Vue 3 Composition API 的核心，它用于定义组件的逻辑，并在组件实例创建之前执行。setup 函数替代了 Vue 2 中的 data、methods、computed、watch 等选项，使得逻辑更灵活地组合和复用。

setup 函数在 Vue 3 中为组织和管理组件逻辑提供了极大的灵活性。它将逻辑按功能分组，简化了代码的结构和复用，使得复杂的组件更容易维护和扩展。

setup 函数参数

setup 接受两个参数：props：父组件传递的 props，它是只读的。context：包含 attrs、slots 和 emit，用于访问组件的上下文。

setup(props, context) {
}

props 是父组件传入的属性
context.attrs 包含非 prop 的属性
context.slots 包含插槽内容
context.emit 用于触发事件

setup 函数返回值

setup 函数的返回值决定了模板中可以访问的数据和方法。通常返回一个对象，包含响应式数据、方法、计算属性等。

setup() {
const count = ref(0);

function increment() {
count.value++;
}

return { count, increment };
}

在模板中可以直接使用 count 和 increment。

<template>
<button @click="increment">Count: {{ count }}</button>
</template>

setup 响应式数据

在 setup 中可以使用 Vue 的响应式 API，如 ref 和 reactive，来创建响应式状态。

ref：用于处理原始值的响应式数据。
reactive：用于创建复杂对象的响应式数据。

import { ref, reactive } from 'vue';

setup() {
const count = ref(0);
const user = reactive({ name: 'John', age: 30 });

return { count, user };
}

setup 生命周期钩子

在 setup 中，可以使用生命周期钩子（如 onMounted、onUpdated、onUnmounted）来处理组件生命周期事件。

import { onMounted, onUnmounted } from 'vue';

setup() {
onMounted(() => {
console.log('Component mounted');
});

onUnmounted(() => {
console.log('Component unmounted');
});

return {};
}

setup 组合逻辑

通过将逻辑封装到可复用的函数中（Composable），可以提高代码的复用性和可维护性。

import { ref, onMounted } from 'vue';

function useCounter() {
    const count = ref(0);

    function increment() {
        count.value++;
    }

    return { count, increment };
}

setup() {
    const { count, increment } = useCounter();

    return { count, increment };
}

setup 函数语法糖

在 Vue 3 中，<script setup> 是一种简化版的 setup 语法糖，旨在使组件代码更加简洁和易读。它自动将 setup() 函数内的逻辑内联到 <script setup> 中，无需显式调用 setup()，大大简化了组件的写法。

<script setup> 语法糖大大简化了 Vue 3 中 setup 函数的写法，使代码更加简洁易读。它自动将声明的变量和函数暴露给模板，省略了传统 setup 函数中的许多重复操作，非常适合开发者快速编写和管理 Vue 组件。

setup 基本语法

使用 <script setup> 时，所有在其中声明的变量、函数、响应式数据等，都可以直接在模板中使用，而不需要通过 return 返回。

<template>
    <div>
        <p>Count: {{ count }}</p>
        <button @click="increment">Increment</button>
    </div>
</template>
  
<script setup>
import { ref } from 'vue';

const count = ref(0);

function increment() {
    count.value++;
}
</script>

语法糖 vs 常规 setup 函数

<script setup> 中声明的变量、函数、响应式数据、导入的模块等会自动被暴露到模板中，无需 return。避免了传统 setup() 函数的显式返回，代码更清晰、简短。

传统 setup 写法

<template>
    <div>
        <p>{{ message }}</p>
    </div>
</template>
  
<script>
import { ref } from 'vue';

export default {
    setup() {
        const message = ref('Hello, Vue!');
        return { message };
    }
}
</script>

使用 <script setup> 语法糖

<template>
    <div>
        <p>{{ message }}</p>
    </div>
</template>
  
<script setup>
import { ref } from 'vue';

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

Props 和 Emits

在 <script setup> 中，可以直接使用 defineProps 和 defineEmits 这两个内置函数来处理 props 和 emits，而不需要显式定义 props 和 emit。

setup 处理 props

<template>
<p>{{ name }}</p>
</template>

<script setup>
const props = defineProps({
name: String
});
</script>

setup 处理 emit

<template>
<button @click="handleClick">Click me</button>
</template>

<script setup>
const emit = defineEmits(['update']);

function handleClick() {
emit('update', 'New value');
}
</script>

setup 适配 TypeScript

<script setup> 支持 TypeScript，可以直接在声明中使用类型提示，无需额外的 defineComponent 包装。

<script setup lang="ts">
import { ref } from 'vue';

const count = ref<number>(0);
</script>

setup 组合逻辑

和传统的 setup 一样，<script setup> 也可以调用组合函数（Composable）以便复用逻辑。

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

function useCounter() {
const count = ref(0);
function increment() {
  count.value++;
}
return { count, increment };
}

const { count, increment } = useCounter();

onMounted(() => {
console.log('Component mounted');
});
</script>

ref 创建响应式数据

在 Vue 3 中，ref 是用于创建响应式数据的工具，适用于基本类型（如数字、字符串、布尔值等）或单个变量。ref 包装了一个值，并在这个值发生变化时，自动触发依赖该值的视图更新。

ref 是 Vue 3 中创建响应式数据的基础工具，适用于基本数据类型。通过 .value 访问或修改响应式数据。在模板中，Vue 会自动解包 ref 的 .value，直接使用变量即可。它是让 Vue 组件的状态和视图保持同步更新的核心机制之一。

使用 ref 创建响应式数据

首先需要从 Vue 中导入 ref 函数。使用 ref() 包裹原始值来创建响应式数据，返回的对象会自动追踪其变化并通知视图更新。

import { ref } from 'vue';

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

访问和修改 ref 的值

ref 返回的是一个包含 .value 属性的对象，访问和修改这个值时，需要通过 .value。

count.value++;  // 修改 count 的值
console.log(count.value);  // 访问 count 的值

template 使用 ref

在模板中可以直接使用 ref，Vue 会自动解包 .value，因此不需要显式访问 .value。在这个例子中，点击按钮会触发 increment 函数，count.value 的值增加，并且自动触发页面视图的更新。

<template>
<div>
<p>{{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>

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

const count = ref(0);  // 创建响应式数据

function increment() {
count.value++;  // 修改响应式数据
}
</script>

ref 的应用场景

基本数据类型：`ref` 适合用于数字、字符串、布尔值等基本类型的数据响应式处理。
DOM 元素引用：`ref` 还可以用于获取和操作 DOM 元素。

<template>
<input ref="inputRef" placeholder="Type something">
</template>

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

const inputRef = ref(null);  // 创建一个 DOM 元素的 ref

onMounted(() => {
inputRef.value.focus();  // 在组件挂载后，聚焦输入框
});
</script>

reactive 创建响应式数据

在 Vue 3 中，reactive 是用于创建复杂对象（如数组和对象）的响应式数据工具。与 ref 主要用于包装原始数据不同，reactive 会深度将整个对象或数组变成响应式的，因此适合处理嵌套的结构或多个属性。

简单来说，reactive 用于创建对象或数组的响应式数据，适合复杂的数据结构。直接操作 reactive 对象的属性和元素，无需 .value。reactive 会深度追踪对象或数组中所有的变化，自动更新依赖它们的视图。

使用 reactive 创建响应式数据

从 Vue 中导入 reactive 函数。使用 reactive() 包裹一个对象或数组，这样该对象中的所有属性都会变成响应式的。

import { reactive } from 'vue';

const state = reactive({
count: 0,
user: {
name: 'John',
age: 25
}
});

访问、修改 reactive 数据

和普通 JavaScript 对象一样，访问和修改 reactive 对象中的属性无需通过 .value，直接操作对象即可，Vue 会自动追踪所有变化。Vue 会自动跟踪这些属性的变化，并更新依赖这些值的视图。

state.count++;  // 修改 count 值
state.user.name = 'Alice';  // 修改 user.name

template 使用 reactive

在模板中，可以直接使用 reactive 创建的响应式对象，Vue 会自动追踪依赖并在数据变化时更新视图。在这个例子中，点击按钮会触发 increment 函数，state.count 增加，Vue 会自动更新页面视图。

<template>
    <div>
        <p>Count: {{ state.count }}</p>
        <p>User: {{ state.user.name }}</p>
        <button @click="increment">Increment</button>
    </div>
</template>
  
<script setup>
import { reactive } from 'vue';

const state = reactive({
    count: 0,
    user: {
        name: 'John',
        age: 25
    }
});

function increment() {
    state.count++;  // 修改 count
}
</script>

reactive 应用场景

对象或数组：处理多个属性、嵌套对象、或者数组时使用 `reactive`，它可以让每个属性和元素都变成响应式的。
复杂状态管理：当组件中有多个互相关联的状态时，`reactive` 能让你更自然地管理它们的响应性。

ref 和 reactive 区别

特性refreactive
适用场景用于包装原始值（如数字、字符串、布尔值等）用于包装对象或数组，深度响应式
访问方式通过 .value 访问或修改值直接访问或修改对象属性，无需 .value
响应式处理只对包裹的单个值进行响应式处理深度响应式处理，追踪对象所有属性的变化
嵌套结构支持嵌套对象或数组也需要使用 .value 访问自动处理嵌套对象，所有属性都响应式
性能适用于简单的值，性能开销较小适用于复杂对象，可能有较大的性能开销
常用场景计数器、输入框值等简单变量管理表单数据、复杂状态、嵌套对象或列表
类型支持可以与原始类型直接绑定，如 ref<number>处理复杂类型或接口时非常方便
模板解包模板中自动解包 .value，无需手动访问 .value模板中无需额外处理，直接使用对象属性
示例代码const count = ref(0); count.value++;const state = reactive({ count: 0 }); state.count++;

ref 适用于原始值的响应式处理，轻量且直接，但对于复杂对象需要手动处理 .value。reactive 适合管理复杂的对象和数组，深度响应式管理嵌套数据结构，操作更加自然。

更新中······


原文地址：https://blog.csdn.net/qq_47452807/article/details/142447200

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

  • 怎么理解toISOString()

    对象的一个方法，它用于返回一个表示该日期对象的 ISO 8601 扩展格式的字符串。ISO 8601 是一种国际标准，用于表示日期和时间，旨在提供一种全球通用的日期和时间表示方法。但是，请注意，上面的

    阅读更多2024-09-23
  • ShellCode异或编码器实现

    编码器是将原始的 shellcode 转换为一种在目标环境中可以安全传输或存储的格式。通过将原始 shellcode 的每个字节进行某种操作（如 XOR、加法、字节替换等），以避免生成无效字符或被检测

    阅读更多2024-09-23
  • 科隆新材同一时期转贷近4000万，实控人违规资金占用被警示

    另外，报告期内，科隆新材的研发费用分别为1447.51万元、1837.33万元、2180.12万元和1419.99万元，占当期研发费用的4.63%、5.58%、4.94%和6.86%。报告期内，科隆新

    阅读更多2024-09-23
  • UML类图绘制

    在学习面向对象语言时，我们可以使用UML类图来描述将要编写的程序中类与类之间的关系。绘制类图可以让程序员更清晰的感知类与类之间的关系，进而编写出更符合需求的代码。（博主使用的是“亿图图示”中的绘制工具

    阅读更多2024-09-23
  • wrk(1) command

    wrk 是由 Will Glozer 开发的，并首次发布于 2012 年。wrk 是一个现代的 HTTP 压力测试工具，利用现代多线程技术和高效的网络 I/O 处理，能够生成大量的并发请求，用以测试

    阅读更多2024-09-23
  • 基于SpringBoot的社团管理系统【附源码】

    本社团管理系统有管理员，用户，社长。管理员功能有个人中心，用户管理，社长管理，社团信息管理，加入社团管理，社团活动管理，活动报名管理，经费信息管理，新闻信息管理，系统管理等。社长创建社团，管理员审核

    阅读更多2024-09-23
  • 【docker】在IDEA工具内，远程操作服务器上的docker

    【代码】【docker】在IDEA工具内，远程操作服务器上的docker。

    阅读更多2024-09-23
  • 三线城市的女玩家们不想“谈恋爱”，小游戏掘金新蓝海

    随着剧情的推进和旅馆翻新的进行，玩家将不断解锁新的生成器和功能，持续激发游戏兴趣，形成强烈的沉浸感。以换装游戏为例，多数女性玩家会在游戏中将控制的角色视为抚养的对象，投入深厚的情感。除了之前提及的《浪

    阅读更多2024-09-23
  • 【LeetCode】动态规划—使用最小花费爬楼梯（附完整Python/C++代码）

    在这个问题中，我们有一个数组costcost[]cost，其中costicost[i]costi表示从第iii个台阶爬到下一个台阶的费用。你可以从第0个台阶或第1个台阶开始，然后每次可以选择爬111个

    阅读更多2024-09-23
  • 【中国留学网-注册_登录安全分析报告】

    教育部（中国）留学服务中心（以下简称“中心”）成立于1989年3月31日，是教育部直属事业单位，以事业单位法人注册，主要从事出国留学、留学回国、来华留学以及教育国际交流与合作等领域的相关服务。作为教育

    阅读更多2024-09-23
自学内容网
Copyright © 2015-2024