当前位置：首页 > article >正文

vue精简面试题

article 2025/3/4 7:25:46

实现方式：
使用 Object.defineProperty 对数据对象的每个属性进行递归劫持（Getter/Setter），通过 依赖收集（Dep） 和 派发更新（Watcher） 实现响应式。
- 依赖收集：在 Getter 中收集依赖（如模板中的变量）。
- 派发更新：在 Setter 中通知 Watcher 触发视图更新。
缺点：
- 无法监听对象新增属性或删除属性（需用 Vue.set/Vue.delete）。
- 对数组的监听需重写数组方法（如 push, pop）。

实现方式：
使用 Proxy 代理整个对象，Reflect 操作对象属性，无需递归遍历，天然支持动态新增/删除属性。
- 优势：
  - 性能更好，支持 Map/Set 等数据结构。
  - 无需手动处理数组和对象的变化。
核心流程：
- Proxy 拦截对象操作（如 get, set, deleteProperty）。
- 通过 track 和 trigger 函数追踪依赖和触发更新。

示例：

vue

复制

<input v-model="message">
<!-- 等价于 -->
<input :value="message" @input="message = $event.target.value">

自定义组件中的 v-model：
Vue 2 默认使用 value 属性和 input 事件；
Vue 3 支持自定义 modelValue 属性和 update:modelValue 事件，允许多个 v-model 绑定。

作用：
在下次 DOM 更新循环结束后执行回调函数，用于获取更新后的 DOM。
原理：
Vue 的异步更新队列会批量处理数据变更，nextTick 将回调推入微任务队列（优先 Promise.then，降级到 setImmediate 或 setTimeout）。

使用场景：

javascript

复制

this.message = '更新数据';
this.$nextTick(() => {
  console.log('DOM 已更新:', this.$refs.element.textContent);
});

方式	说明	适用场景
Props/$emit	父子组件通过 Props 传值，子组件通过 `$emit` 触发事件通知父组件。	父子组件直接通信
Event Bus	全局事件总线（`const bus = new Vue()`），通过 `bus.$on` 和 `bus.$emit`。	跨层级简单通信（小型项目）
Provide/Inject	祖先组件 `provide` 提供数据，后代组件 `inject` 注入。	跨层级深层嵌套组件
Vuex/Pinia	全局状态管理库，集中管理共享状态。	复杂应用的状态管理
$refs	通过 `this.$refs.childRef` 直接访问子组件实例。	父组件直接操作子组件方法或数据

核心策略：
- 同级比较：仅比较同一层级的节点，不跨级比较。
- 双端指针：Vue 2 使用双端对比算法，减少移动次数。
- Key 优化：通过 key 标识节点，复用相同 key 的元素。
Vue 3 的优化：
- 静态提升：将静态节点提升到渲染函数外部，避免重复创建。
- 补丁标志（Patch Flags）：标记动态节点类型（如文本、class），跳过未变化部分。