公司做网站怎么赚钱宜昌教育云网站建设

Vue 核心概念

1. Vue 的生命周期钩子函数有哪些？

Vue 组件生命周期主要分为 8 个阶段：

1. 创建阶段：

   • beforeCreate：实例刚创建，data 和 methods 还未初始化
   • created：实例创建完成，data 和 methods 已初始化，但 DOM 未挂载

2. 挂载阶段：

   • beforeMount：模板编译完成，但未挂载到页面
   • mounted：实例已挂载到 DOM，可以访问 DOM 元素

3. 更新阶段：

   • beforeUpdate：数据更新时触发，DOM 未重新渲染
   • updated：数据更新完成，DOM 已重新渲染

4. 销毁阶段：

   • beforeDestroy：实例销毁前，仍可访问实例
   • destroyed：实例已销毁，所有绑定和监听被移除

2. Vue 的双向数据绑定原理是什么？

Vue 使用 数据劫持 + 发布订阅模式 实现双向绑定，核心是通过 Object.defineProperty()（Vue 2.x）或 Proxy（Vue 3.x）来劫持各个属性的 setter 和 getter：

1. Observer：递归遍历 data 对象，使用 Object.defineProperty 设置 getter/setter
2. Dep：每个属性都有一个 Dep 实例，用于收集依赖（Watcher）
3. Watcher：作为 Observer 和 Compile 的桥梁，当数据变化时触发回调
4. Compile：解析模板指令，初始化视图，并订阅数据变化

Vue 3.x 改用 Proxy 实现，优势在于：

• 可以直接监听对象而非属性
• 可以直接监听数组变化
• 有更多拦截方法（13种）
• 性能更好

3. computed 和 watch 的区别是什么？

computed：

• 是计算属性，基于依赖的响应式数据进行缓存
• 只有依赖的数据发生变化才会重新计算
• 必须有 return 语句
• 适合复杂逻辑计算

watch：

• 是监听器，监听特定数据的变化
• 无缓存性，每次变化都会执行
• 可以执行异步操作
• 适合数据变化时执行异步或开销较大的操作

4. Vue 组件通信方式有哪些？

1. 父子组件通信：

   • props / $emit
   • $parent / $children（不推荐）
   • ref 获取组件实例

2. 兄弟组件通信：

   • 通过共同的父组件中转
   • 事件总线（Event Bus）
   • Vuex

3. 跨级组件通信：

   • provide / inject
   • $attrs / $listeners（Vue 2.x）
   • Vuex

4. 全局通信：

   • Vuex 状态管理
   • Event Bus
   • 全局事件总线

Vue 进阶知识

5. Vue 的 nextTick 原理是什么？

nextTick 是 Vue 提供的异步延迟执行方法，其原理是：

1. Vue 在更新 DOM 时是异步执行的，数据变化后不会立即更新 DOM
2. 使用微任务（microtask）优先策略：
   • 优先使用 Promise.then
   • 降级使用 MutationObserver
   • 再降级使用 setImmediate
   • 最后使用 setTimeout

使用场景：

• 在数据变化后操作依赖于新 DOM 结构的代码
• 在 created 生命周期中操作 DOM

6. Vue 的虚拟 DOM 和 diff 算法

虚拟 DOM：

• 是用 JavaScript 对象描述真实 DOM 的抽象
• 通过比较新旧虚拟 DOM 的差异，最小化 DOM 操作

diff 算法：

1. 同级比较，不跨级比较
2. 比较标签名和 key 值
3. 双端比较策略（Vue 2.x）：
   • 新旧节点的首尾各有一个指针，共4种比较方式
   • 如果都没匹配到，则用新节点的 key 在旧节点中查找
4. 最长递增子序列优化（Vue 3.x）

7. Vue 3 的新特性有哪些？

1. Composition API：

   • setup() 函数
   • ref 和 reactive 响应式API
   • 更好的逻辑复用

2. 性能提升：

   • 使用 Proxy 代替 Object.defineProperty
   • 更高效的虚拟 DOM
   • 更好的 Tree-shaking 支持

3. 新特性：

   • Fragment（多根节点组件）
   • Teleport（传送门）
   • Suspense（异步组件）
   • 自定义渲染器 API

4. TypeScript 支持：

   • 完全使用 TypeScript 重写
   • 更好的类型推断

8. Vuex 的核心概念是什么？

Vuex 是 Vue 的状态管理库，核心概念包括：

1. State：存储应用状态数据
2. Getter：从 state 派生的计算属性
3. Mutation：唯一修改 state 的方法，同步操作
4. Action：提交 mutation，可以包含异步操作
5. Module：将 store 分割成模块

工作流程：
组件 → dispatch Action → commit Mutation → mutate State → 更新视图

Vue 实战问题

9. Vue 的性能优化手段有哪些？

1. 编码阶段：

   • 合理使用 v-if 和 v-show
   • 合理使用 computed 和 watch
   • v-for 必须加 key，避免与 v-if 一起使用
   • 组件懒加载
   • 防抖节流

2. 打包优化：

   • 按需引入组件库
   • 使用 CDN 加载第三方资源
   • 开启 gzip 压缩
   • 使用 Tree-shaking 移除无用代码

3. 运行时优化：

   • 使用 keep-alive 缓存组件
   • 使用 v-once 和 v-memo（Vue 3）
   • 长列表虚拟滚动
   • 避免大数据响应式

10. Vue Router 的导航守卫有哪些？

1. 全局守卫：

   • beforeEach：路由进入前
   • beforeResolve：路由解析前
   • afterEach：路由进入后

2. 路由独享守卫：

   • beforeEnter：特定路由进入前

3. 组件内守卫：

   • beforeRouteEnter：进入组件前（无法访问 this）
   • beforeRouteUpdate：路由改变但组件复用时
   • beforeRouteLeave：离开组件前

执行顺序：beforeRouteLeave → beforeEach → beforeEnter → beforeRouteEnter → beforeResolve → afterEach

11. 什么是 Vue 的 mixin？有什么优缺点？

mixin 是一种分发 Vue 组件可复用功能的灵活方式，可以包含任意组件选项。

优点：

• 代码复用
• 逻辑解耦
• 维护方便

缺点：

• 命名冲突
• 来源不明确
• 多个 mixin 可能导致复杂度增加

Vue 3 推荐使用 Composition API 替代 mixin。

12. Vue 的响应式原理中数组的处理方式

Vue 2.x 中对数组的特殊处理：

1. 重写了数组的 7 个方法：
   • push, pop, shift, unshift, splice, sort, reverse
2. 这些方法被重写后，除了执行原生操作外，还会触发视图更新
3. 直接通过索引修改数组项或修改数组长度不会触发响应式：

   this.items[0] = newValue // 不会触发更新
   this.items.length = 0 // 不会触发更新
   

   需要使用 Vue.set 或数组的 splice 方法

Vue 3.x 使用 Proxy 后，可以直接检测数组索引和长度的变化。