组合式API on ZiYang FrontEnd Interview

子组件实例与DOM访问方法

Tue, 04 Mar 2025 07:00:27 +0000

考察点分析

该题目主要考查以下核心能力维度：

Vue响应式系统理解：掌握组件实例与DOM元素访问的正确姿势，避免直接操作DOM破坏响应式原则
组件通信机制：理解跨组件访问的官方推荐模式
组合式API适应能力：展示从选项式API到组合式API的迁移认知

具体技术评估点：

ref属性的两种使用场景（DOM元素/组件实例）
$refs集合的初始化时机与响应式特性
组合式API中模板引用的处理方式
expose()方法在组件封装中的作用
TypeScript类型推导在模板引用中的应用

技术解析

关键知识点

模板引用 > 组件实例方法暴露 > 组合式API适配

原理剖析

模板引用机制：通过ref特殊属性创建直接访问入口。Vue在组件挂载时，将DOM元素/组件实例自动绑定到this.$refs对象，该过程发生在mounted生命周期后
响应式脱敏：$refs本身并非响应式对象。当使用v-for时，引用会转换为数组形式，但数组元素仍保持非响应式特性
组合式API变化：

 // 声明与模板中ref同名的响应式引用
const childRef = ref(null)

// 必须return才能在模板中访问
return { childRef }

需注意：

引用值在组件挂载后才可用
需使用expose显式暴露子组件方法
模板引用与响应式ref共享命名空间

常见误区

在created阶段尝试访问$refs
误以为refs变化会触发视图更新
v-for中使用索引访问动态引用未做空值校验
组合式API中忘记return模板引用

问题解答

Vue提供了两种安全方式访问子组件或DOM元素：

ref属性：

在DOM元素上使用<div ref="domRef">，通过this.$refs.domRef访问原生DOM
在子组件上使用<Child ref="childRef">，获取组件实例并调用其暴露的方法

$refs工作机制：

在组件渲染后填充引用
非响应式对象，不可用于模板绑定
v-for循环中返回引用数组

组合式API变化要点：

使用同名响应式ref变量替代this.$refs
需通过expose方法显式暴露子组件方法
模板引用需在setup()中声明并return
TypeScript需手动标注引用类型

解决方案

选项式API示例

 // 子组件
export default {
 methods: {
 doSomething() {
 // 组件方法
 }
 }
}

// 父组件模板
<template>
 <ChildComponent ref="child" />
 <button ref="btn">Submit</button>
</template>

<script>
export default {
 mounted() {
 this.$refs.child.doSomething() // 访问子组件
 this.$refs.btn.focus() // 操作DOM
 
 // 动态引用处理
 if (Array.isArray(this.$refs.child)) {
 this.$refs.child[0].doSomething()
 }
 }
}
</script>

组合式API示例

 // 子组件
import { defineComponent } from 'vue'

export default defineComponent({
 setup(props, { expose }) {
 const doSomething = () => {}
 
 // 显式暴露方法
 expose({ doSomething })
 
 return { doSomething }
 }
})

// 父组件
<template>
 <ChildComponent :ref="(el) => childRef = el" />
 <button ref="btnRef"></button>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const childRef = ref<InstanceType<typeof ChildComponent> | null>(null)
const btnRef = ref<HTMLButtonElement | null>(null)

onMounted(() => {
 childRef.value?.doSomething()
 btnRef.value?.focus()
})
</script>

边界处理建议

使用可选链操作符避免未定义错误
v-if控制的元素需在回调中重新获取引用
动态组件使用keep-alive时注意引用更新时机

性能优化

避免高频操作DOM引发重排
复杂场景优先考虑状态驱动而非DOM操作
使用防抖/节流控制DOM操作频率

深度追问

为什么$refs不适合模板绑定？ 由于引用非响应式，变更不会触发视图更新

组合式API常用方法解析

Tue, 04 Mar 2025 07:00:31 +0000

考察点分析

本题主要考核以下核心能力维度：

响应式系统原理：对Vue3响应式机制的理解深度
组合式API应用能力：核心API的适用场景与实现差异
异步状态管理：事件循环与响应式更新的协同机制

具体技术评估点：

ref与reactive的响应式实现差异
computed的缓存特性与依赖收集机制
provide/inject的跨层级通信原理
微任务队列与DOM更新时机的关联性

技术解析

关键知识点

响应式基础（ref/reactive） > 计算属性（computed） > 依赖注入（provide/inject） > 异步更新机制

原理剖析

ref：通过Object.defineProperty实现基本类型值的响应式包装，内部值存储在.value属性中。当操作.value时触发依赖收集与更新通知。
reactive：基于Proxy代理对象，实现深层次响应式。直接操作属性即可触发更新，但解构会丢失响应性。
computed：惰性求值的响应式引用，依赖变更时缓存失效。内部通过effect实现依赖追踪。
异步陷阱：Vue的响应式更新在同步代码中自动批处理，但在异步回调（如setTimeout或Promise）中直接赋值.value可能导致更新未及时触发，需配合nextTick确保DOM更新队列执行。

常见误区

误将reactive用于基本类型导致性能浪费
异步回调中遗漏.value操作引发更新丢失
混淆computed与methods的使用场景

问题解答

核心API作用：

ref：包装基本类型值为响应式对象，通过.value访问
reactive：创建深层次响应式对象，适用于复杂数据结构
computed：创建依赖其他响应式状态的计算属性，具有缓存优化
provide/inject：实现跨组件层级的状态注入，解决prop逐层传递问题

异步场景注意点：在异步回调中直接修改.value可能错过Vue的批量更新时机。由于Vue的响应式更新在同步任务中合并处理，而异步任务处于新的调用栈（Call Stack），此时赋值操作会立即触发渲染队列，可能导致重复计算或视图更新不同步。需在修改后调用nextTick确保更新时序正确。

解决方案

编码示例

 // 异步请求中的正确用法
const dataRef = ref(null);

fetchData().then((response) => {
 dataRef.value = response; // 正确触发响应式更新
}).catch(() => {
 dataRef.value = null; // 边界条件处理
});

// 组件卸载时取消请求（示例）
onBeforeUnmount(() => {
 abortController.abort();
});

优化建议

低端设备优化：对大型响应式对象使用shallowRef减少代理开销
高并发场景：结合watchEffect自动清理副作用，避免内存泄漏

深度追问

reactive处理Map/Set的局限？ 回答提示：需使用reactive包装容器+自定义拦截器

组合式API on ZiYang FrontEnd Interview

子组件实例与DOM访问方法

考察点分析 link

技术解析 link

关键知识点 link

原理剖析 link

常见误区 link

问题解答 link

解决方案 link

选项式API示例 link

组合式API示例 link

边界处理建议 link

性能优化 link

深度追问 link

组合式API常用方法解析

考察点分析 link

技术解析 link

关键知识点 link

原理剖析 link

常见误区 link

问题解答 link

解决方案 link

编码示例 link

优化建议 link

深度追问 link

考察点分析

技术解析

关键知识点

原理剖析

常见误区

问题解答

解决方案

选项式API示例

组合式API示例

边界处理建议

性能优化

深度追问

考察点分析

技术解析

关键知识点

原理剖析

常见误区

问题解答

解决方案

编码示例

优化建议

深度追问