vue ref和$refs 获取元素dom、获取子组件数据与方法

'# vue ref和$refs 获取元素dom、获取子组件数据与方法

一、背景与问题

在Vue开发中，ref和$refs是实现组件间通信和操作DOM的重要机制。但其使用往往伴随着潜在风险：如直接操作DOM可能导致代码耦合、频繁访问$refs可能引发性能问题、子组件状态更新时引用可能失效等。

传统开发中，开发者常通过ref获取子组件实例或DOM元素，但这种设计违背了Vue的响应式原则。本文将深入分析其原理、使用场景、性能优化方案以及实际开发中的最佳实践。

二、基本原理

1. ref的注册机制

Vue在组件挂载阶段通过$mount方法创建组件实例，此时会遍历所有带有ref属性的元素/组件，将它们注册到$refs对象中。注册过程如下：

// Vue 3源码片段（简化版）
function mountComponent(vm, el, hydrating) {
  const ref = this.$options.ref;
  if (ref) {
    if (Array.isArray(ref)) {
      this.$refs[ref[0]] = this;
    } else {
      this.$refs[ref] = this;
    }
  }
}

2. 渲染周期中的变化

• 创建阶段：组件初始化时注册$refs
• 更新阶段：当子组件更新时，$refs会自动更新
• 销毁阶段：组件卸载时$refs会被清除

3. DOM与组件的引用差异

ref可以同时指向DOM元素和组件实例，但需要区分使用场景：

<template>
  <div ref="domRef"></div>
  <ChildComponent ref="childRef" />
</template>

三、环境准备

npm install vue@3

四、核心实现

1. 获取DOM元素

<template>
  <div ref="container">
    <p ref="paragraph">Hello Vue</p>
  </div>
</template>

<script>
export default {
  mounted() {
    // 延迟访问确保DOM已渲染
    setTimeout(() => {
      const dom = this.$refs.container;
      const paragraph = this.$refs.paragraph;
      console.log('DOM高度:', dom.clientHeight);
      console.log('段落文本:', paragraph.textContent);
    }, 0);
  }
}
</script>

关键点：

• 必须在mounted钩子或nextTick中访问
• 避免在created阶段直接访问
• 使用setTimeout可确保异步更新

2. 获取子组件数据与方法

<template>
  <ChildComponent ref="child" />
</template>

<script>
export default {
  methods: {
    callChildMethod() {
      this.$refs.child.customMethod();
    }
  }
}
</script>

子组件：

<script>
export default {
  methods: {
    customMethod() {
      console.log('子组件方法被调用');
    }
  }
}
</script>

3. 多级组件引用

<template>
  <ParentComponent ref="parent" />
</template>

<script>
export default {
  mounted() {
    this.$refs.parent.$refs.child.customMethod();
  }
}
</script>

五、完整案例

表单验证组件

<!-- FormComponent.vue -->
<template>
  <div>
    <input ref="input" type="text" @input="onInput" />
    <p v-if="error">{{ error }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      error: ''
    };
  },
  methods: {
    onInput(e) {
      const value = e.target.value;
      if (value.length < 3) {
        this.error = '至少输入3个字符';
      } else {
        this.error = '';
      }
    }
  }
}
</script>

父组件：

<template>
  <FormComponent ref="form" />
  <button @click="validate">验证</button>
</template>

<script>
export default {
  methods: {
    validate() {
      const input = this.$refs.form.$refs.input;
      console.log('输入值:', input.value);
      // 可以直接访问子组件方法
      this.$refs.form.validate();
    }
  }
}
</script>

六、源码解析

Vue 3的$refs实现基于响应式系统，关键在mountComponent阶段：

// src\core\instance\mounting.js
function mountComponent(vm, el, hydrating) {
  const ref = this.$options.ref;
  if (ref) {
    if (Array.isArray(ref)) {
      this.$refs[ref[0]] = this;
    } else {
      this.$refs[ref] = this;
    }
  }
}

当组件更新时，Vue会自动更新$refs引用，但不会触发重新渲染，这可能导致引用的滞后性。

七、进阶使用

1. 与事件总线结合

// eventBus.js
import { createEventBus } from 'vue';

export const eventBus = createEventBus();

子组件：

export default {
  mounted() {
    this.eventBus.on('custom-event', this.handleEvent);
  },
  methods: {
    handleEvent(data) {
      console.log('收到事件:', data);
    }
  }
}

父组件：

import { eventBus } from './eventBus';

export default {
  methods: {
    triggerEvent() {
      eventBus.emit('custom-event', '来自父组件的数据');
    }
  }
}

2. 与Vuex结合

// store.js
import { createStore } from 'vuex';

export const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

子组件：

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    updateCount() {
      this.$store.commit('increment');
    }
  }
}
</script>

八、性能与工程实践

1. 性能优化方案

2. 安全风险

• XSS攻击：直接操作DOM时需注意内容转义
• 数据污染：通过$refs修改子组件状态可能导致数据不一致
• 状态同步问题：跨组件引用时需注意状态更新的顺序

九、常见问题与踩坑

1. 常见错误示例

// 错误示例
mounted() {
  this.$refs.child.someMethod(); // 可能未初始化
}

原因：子组件可能尚未挂载

改进方案：

mounted() {
  this.$nextTick(() => {
    this.$refs.child.someMethod();
  });
}

2. 异步更新问题

// 错误示例
mounted() {
  this.$refs.input.value = '新值'; // 未触发更新
}

原因：直接修改DOM属性不会触发Vue响应式更新

改进方案：

mounted() {
  this.$refs.input.focus(); // 使用Vue的API
}

3. 跨层级引用问题

// 错误示例
mounted() {
  this.$refs.parent.$refs.child; // 可能为undefined
}

解决方案：使用v-if确保子组件存在

十、最佳实践

十一、总结

ref和$refs是Vue实现组件间通信的重要工具，但其使用需要谨慎对待。在实际开发中：

• 推荐使用场景：需要直接操作DOM、访问子组件方法、实现复杂交互
• 应避免场景：替代响应式系统、频繁访问$refs、跨层级引用

通过合理使用ref和$refs，结合Vue的响应式系统，可以实现更灵活的组件交互。但始终要记住：过度依赖$refs可能导致代码耦合，建议优先考虑组件通信的最佳实践。