Derivefly-优快云博客

原创 Vue2篇1

本文摘要： Vue.js核心知识点包括模板语法（插值表达式和指令）、数据绑定（单向和双向）、MVVM模型、事件处理、计算属性与监视、样式绑定、条件渲染、列表渲染以及过滤器等。Vue组件化编程分为模块和组件，单文件组件由模板、JS模块和样式三部分组成。Vue实例生命周期包括初始化、更新和销毁阶段，内置指令如v-if、v-for等实现常见功能，自定义指令可扩展功能。

2025-07-26 17:35:06 585

Vue3响应式系统与生命周期详解：watch/watchEffect支持监听多种数据源（ref/reactive及其属性），提供更灵活的响应式编程；生命周期分为创建、挂载、更新和卸载四个阶段，相比Vue2在命名（如beforeDestroy→onBeforeUnmount）和使用方式（组合式API需显式导入）上有优化，setup()函数整合了逻辑，使代码组织更清晰。Vue3在保持向下兼容的同时，提供了更现代化的开发体验。

2025-07-17 15:55:44 412

原创 vue3中ref，reactive，toRefs与toRef创建响应式数据

Vue3响应式API核心解析：ref用于基本类型，通过.value访问；reactive适用于对象/数组，直接修改属性。关键区别：ref需要.value操作，reactive自动深度响应。toRef/toRefs用于保持reactive属性的响应性，toRef处理单个属性，toRefs处理整个对象。在TypeScript中，ref可明确类型标注，reactive自动推断类型。注意事项：reactive解构会丢失响应性，需用toRefs转换。合理选择API可提升代码效率，ref适合独立值，reactive适合

2025-07-17 11:40:44 870

原创 vite打包工具使用

Vite是一款现代前端构建工具，基于原生ES模块实现快速开发服务器启动和热更新。它支持主流框架（Vue/React等），提供开箱即用的项目初始化（npm create vite）、高效开发模式（npm run dev）和Rollup打包能力（npm run build）。核心功能包括：可配置的vite.config.js、插件系统、环境变量管理（.env文件）和自动性能优化（代码分割/依赖预构建）。与传统工具相比，Vite具有毫秒级冷启动、即时热更新和高效生产打包等优势。其项目结构简洁，包含src源码目录和

2025-07-12 10:40:56 367

原创 webpack打包工具使用

Webpack是一个JavaScript模块打包工具，其核心包括入口(Entry)、输出(Output)、Loader、插件(Plugin)和模式(Mode)。基础配置需创建webpack.config.js文件，设置入口起点和输出路径。Loader处理非JS文件，如通过css-loader/style-loader转换CSS。插件扩展功能，如html-webpack-plugin生成HTML模板。Babel用于代码转换，需配合babel-loader。配置支持单入口或多入口，输出路径可自定义，模式区分开发

2025-07-11 16:07:51 359

原创 Node.js模块导出：exports与module.exports差异详解

Node.js模块导出机制中，module.exports是真正的导出对象，而exports只是它的引用。关键区别在于：1）直接对exports赋值会切断引用关系导致导出失败；2）最终以module.exports内容为准。建议场景：导出单一对象用module.exports，扩展功能用exports添加属性。注意避免对exports重新赋值，否则会导致导出为空对象。正确理解两者的引用关系是避免导出错误的关键。

2025-07-11 15:16:19 238

Derivefly的博客