vue总结2

原创已于 2025-07-10 07:26:11 修改 · 454 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-07-08 13:01:58 首次发布

1. vue 的常用指令 ?

v-model、v-for,v-if、v-show、v-on ,v-bind、v-slot、v-html、v-text

v-pre：
- 跳过元素和它的子元素的编译过程，可用于显示原始的 Mustache 标签。
- 示例：<span v-pre>{{ 这个内容不会被 Vue 编译 }}</span>
v-cloak：
- 在 Vue 实例编译/挂载完成之前保持在元素上，可用于防止页面加载时出现未编译的 Mustache 标签闪烁问题。需要配合 CSS 规则如 [v-cloak] { display: none; } 使用。
- 示例：<div v-cloak>编译/挂载完成后此元素可见</div>
v-once：
- 渲染元素和组件一次，并跳过之后的所有更新。适用于优化性能，特别是在包含大量静态内容的情况下。
- 示例：<span v-once>This will never change: {{msg}}</span>

渲染时机：
- v-if 是“真正的”条件渲染，因为它确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有当条件为真时，才会渲染该元素。
- v-show 只是简单地基于 CSS 的 display 属性进行切换。无论初始条件是什么，元素总是会被渲染，并且只是简单地使用 CSS 来控制显示与隐藏。
性能考虑：
- v-if 在条件频繁切换时开销较大，因为它涉及到创建和销毁 DOM 元素以及组件的生命周期钩子函数的触发。
- v-show 初始渲染时开销较大，因为即使条件为假，元素也会被渲染出来。但在需要频繁切换显示状态的情况下，v-show 的性能通常更好，因为它只涉及 CSS 属性的改变。
适用场景：
- 如果你需要在初始化时就决定是否渲染某个部分，或者这个部分在运行时很少改变，那么使用 v-if 更合适。
- 如果你需要频繁地切换一个元素的显示与隐藏，那么 v-show 可能是更好的选择。

Vue 实现双向数据绑定主要是通过其响应式系统来实现的。以下是其实现原理的基本概述：

响应式基础：Vue 通过重写对象的 getter 和 setter 方法来追踪依赖关系。当你访问或修改这些响应式对象的属性时，Vue 能够检测到这些变化，并通知相应的视图或其他依赖项进行更新。
模板编译：Vue 编译器在解析模板时会识别出所有的指令（如 v-model）和插值表达式，并将它们与对应的响应式数据关联起来。
v-model 实现：v-model 是 Vue 中用于实现表单输入元素与数据之间双向绑定的语法糖。它实际上是 :value 和 @input 的组合简化版。对于 <input>、<textarea> 或 <select> 等元素，v-model 监听用户的输入事件以更新数据，同时也会根据数据的变化更新输入框的内容。
- 对于文本类型的输入框，v-model 默认监听 input 事件并同步 value 属性。
- 对于复选框或单选按钮，v-model 根据类型监听不同的事件（例如 change），并绑定适当的属性（如 checked）。
依赖收集与派发更新：当渲染一个包含响应式数据的模板时，Vue 会自动追踪哪些依赖（watcher）需要随着数据的变化而更新。一旦数据发生变化，Vue 就会通知所有受影响的 watcher 更新视图，从而实现数据模型与视图之间的双向绑定。

4. vite和webpack 的区别

基于您的技术背景，以下是对Vite、Webpack和Yarn的核心区别的专业分析：

工具	配置复杂度	生态特点
Webpack	高(需手动配置loader/plugin)	成熟插件生态(支持复杂场景)
Vite	低(零配置开箱即用)	兼容Rollup插件，生态快速发展中

类别	Yarn	Webpack/Vite
定位	包管理工具(依赖安装/版本控制)	构建工具(代码打包/优化)
核心功能	并行安装依赖、生成`yarn.lock`	开发服务器、生产构建

作用范围：
- Yarn管理项目依赖(如安装vite或webpack)，解决版本一致性问题。
- Webpack/Vite处理代码打包、资源优化和开发流程。
协作关系：
- 实际项目中：Yarn install → Vite/Webpack build，二者互补而非替代。
- 例如：Yarn负责安装Vite依赖，Vite负责启动开发和生产构建。

技术选型：
- 新项目/现代浏览器环境 → 优先Vite(开发体验更佳)。
- 复杂企业级系统 → Webpack(高度定制化)。
工具组合：
- 推荐使用Yarn管理依赖(速度更快、依赖锁定更可靠)，搭配Vite/Webpack完成构建。
- 示例工作流：yarn add vite → yarn dev(启动Vite开发服务器)。

注：2025年Vite生态已成熟，但Webpack在特定场景(如旧项目维护)仍不可替代。建议根据项目复杂度和技术栈综合选择。

5. pina 没有mutation 的原因？

Pinia 取消 mutation 是刻意为之的设计决策，核心原因如下：

冗余机制去除
Vuex 的 mutation 强制要求状态变更必须通过同步函数提交，而 action 处理异步逻辑。这导致：
- 开发者需维护两套逻辑(mutation + action)
- 模板代码增多(如 commit('INCREMENT'))
- 学习成本上升(理解 mutation/action 分工)
Pinia 方案：
- 合并为 单一 action 机制：支持同步/异步直接修改状态
- 示例：
```
// Pinia 直接修改状态
actions: {
  increment() { this.count++ }
  async fetchData() { this.data = await api.get() }
}
```
消除命名空间污染
Vuex 的命名空间模块需前缀调用(如 userModule/login)，Pinia 通过独立 Store 设计天然避免此问题。

与 Vue 3 深度整合
- 利用 Vue 3 的 reactive 响应式系统
- Action 直接操作 this(自动绑定 store 实例)
- 无需 dispatch/commit 辅助函数，代码更直观：
```
// Vue 3 风格调用
store.increment()
```

TypeScript 零配置支持

类型推导自动完成(无需手动声明 State 接口)：

// Pinia 自动推导类型
const store = useCounterStore()
store.count // 类型: number
store.increment() // 类型: () => void

模块化更灵活

独立 Store 设计(无嵌套模块)：

// 按需引入多个 Store
import { useUserStore } from './user'
import { useCartStore } from './cart'