随笔分类 - vue2和vue3
摘要：一：搭建Vue3开发环境，详解Vue3设计理念及整体架构思想。 1.1 vue3是声明式框架 声明式和命令式的含义及区别： 命令式（ Imperative ）：“我要做这几步操作。” 你亲手指挥每一步，关注“如何做”（How）。 声明式（ Declarative ）：“我要这个东西，你去搞定。” 你
阅读全文
摘要：一、前端安全的重要性 想象一下你的 Vue 应用是一座城堡： XSS攻击 = 敌人伪装成居民混入 CSRF攻击 = 敌人伪造你的指令 数据泄露 = 城堡机密文件被盗 接口攻击 = 城门守卫被欺骗 二、安全威胁与防护方案 1. XSS（跨站脚本攻击）防护 威胁：攻击者在网页中注入恶意脚本 防护方案：
阅读全文
摘要：为组件的 props 标注类型 使用 <script setup> 当使用 <script setup> 时，defineProps() 宏函数支持从它的参数中推导类型： <script setup lang="ts"> const props = defineProps({ foo: { type
阅读全文
摘要：1. <component> - 动态组件（组件变身器） <template> <component :is="currentComponent" /> </template> <script setup> import ComponentA from './ComponentA.vue' impo
阅读全文
摘要：方式1：组合式函数（Composables）⭐ 最常用 // 1. 创建料理包（useCounter.js） import { ref } from 'vue' // 以 use 开头是命名约定 export function useCounter(initialValue = 0) { const
阅读全文
摘要：一、生命周期概述 1.1 什么是生命周期 Vue组件从创建到销毁的整个过程，Vue在关键时刻提供钩子函数，允许我们在特定阶段执行自定义逻辑。 1.2 生命周期图示 text 创建阶段： setup() → onBeforeMount() → onMounted() 更新阶段： onBeforeUpd
阅读全文
摘要：一、组件基本概念 1.1 什么是组件 组件是Vue应用的可复用实例，包含： 模板 (Template) - HTML结构 数据 (Data) - 响应式状态 方法 (Methods) - 交互逻辑 生命周期钩子 (Lifecycle Hooks) 1.2 组件注册 全局注册 import { cre
阅读全文
摘要：概念 模板引用是 Vue 3 中直接访问 DOM 元素或组件实例的方式。通过特殊的 ref 属性，可以在 JavaScript 中获取对模板中元素的直接引用。 基本用法 1. 创建和使用 ref <template> <div> <!-- 在元素上使用 ref --> <input ref="inp
阅读全文
摘要：一、侦听器概念 侦听器（Watchers）是 Vue 3 中用于观察和响应数据变化的机制。当需要在数据变化时执行异步操作或复杂逻辑时，使用侦听器比计算属性更合适。 二、基本用法 1. 使用 watch 函数 import { ref, watch } from 'vue' // 示例1：侦听单个响应
阅读全文
摘要：Vue3 提供了 v-model 指令来实现表单元素和数据的双向绑定，使表单处理更加简单高效。 一、基本概念 1.1 v-model 的核心作用 将表单输入元素与 Vue 实例的数据进行双向绑定 自动监听用户的输入事件并更新数据 数据变化时自动更新表单显示 1.2 v-model 与 v-bind
阅读全文
摘要：1. 基本概念 在 Vue 3 中，事件处理是组件交互的核心部分。Vue 使用 v-on 指令（简写为 @）来监听 DOM 事件，并在触发时执行相应的 JavaScript 代码。 2. 基本用法 2.1 内联事件处理器 <template> <button @click="count++">点击次
阅读全文
摘要：一、核心概念 1.1 什么是列表渲染 列表渲染是将数组或对象的数据映射到 DOM 元素的过程，Vue 3 使用 v-for 指令来实现这一功能。 1.2 主要特性 基于数据源动态生成多个元素 自动响应数据变化 支持多种数据源类型 提供唯一 key 管理 二、基本用法 2.1 数组渲染 <templa
阅读全文
摘要：一、核心概念 条件渲染是指根据特定条件动态控制 DOM 元素的显示与隐藏。Vue 3 提供了多种方式来实现条件渲染。 二、主要指令 1. v-if / v-else-if / v-else 基本用法： <template> <div> <!-- v-if --> <p v-if="isVisible
阅读全文
摘要：Vue 3 提供了多种灵活的方式来操作元素的 class 和 style 绑定，让我们能够根据应用状态动态切换样式。 一、Class 绑定 1. 对象语法 <template> <!-- 根据 isActive 布尔值决定是否添加 active 类 --> <div :class="{ active
阅读全文
摘要：一、什么是计算属性 计算属性是Vue3中用于声明式地处理响应式数据计算的特性。它基于依赖的响应式数据自动缓存计算结果，只有当依赖变化时才会重新计算。 二、基本用法 1. 使用 computed 函数 import { ref, computed } from 'vue' // 创建响应式数据 con
阅读全文
摘要：Vue 3 的响应式系统是其核心特性之一，它基于 ES6 的 Proxy 实现，相比 Vue 2 的 Object.defineProperty 有显著改进。 一、核心概念 1.1 什么是响应式？ 当数据发生变化时，自动更新依赖该数据的视图或计算。 1.2 响应式原理 Vue 3 使用 Proxy
阅读全文
摘要：Vue 2 和 Vue 3 的主要区别体现在以下几个方面： API 类型： Vue 2 使用选项式 API（Options API），组件的逻辑分散在 data、methods、computed 等选项中。 Vue 3 引入了组合式 API（Composition API），通过 setup 函
阅读全文
浙公网安备 33010602011771号