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

Vue 项目中使用$refs来访问组件实例或 DOM 元素，有哪些注意事项？

news 来源：原创 2025/7/16 21:47:05

大白话Vue 项目中使用$refs来访问组件实例或 DOM 元素，有哪些注意事项？

在 Vue 项目里，$refs 是个超实用的工具，它能让你直接访问组件实例或者 DOM 元素。不过使用的时候，有一些地方可得注意，下面咱就详细唠唠。

1. `$refs` 只有在组件渲染完成后才可用

在 Vue 里，组件从创建到渲染完成是有个过程的。只有当组件完全渲染好了，$refs 才能正常使用。要是在组件还没渲染好的时候就想用 $refs 去访问东西，那肯定会出问题。所以，通常会把使用 $refs 的代码放到 mounted 钩子函数里，因为这个钩子函数是在组件渲染完成后才执行的。

export default {// 组件挂载完成后执行的钩子函数mounted() {// 这里可以安全地使用 $refs 访问组件实例或 DOM 元素this.$refs.myComponent.someMethod(); // 调用组件实例的方法this.$refs.myElement.focus(); // 让 DOM 元素获取焦点}
};

2. 不要在模板里直接使用 `$refs`

虽然 $refs 能让你访问组件实例或者 DOM 元素，但千万别在模板里直接用它。因为模板里的代码会在每次数据更新的时候重新计算，如果在模板里用 $refs，可能会导致意外的结果，而且还会影响性能。

<template><!-- 不要这样做 --><!-- <div>{{ $refs.myElement.textContent }}</div> --><div ref="myElement">这是一个 DOM 元素</div>
</template><script>
export default {mounted() {// 在 mounted 钩子函数里使用 $refsconst text = this.$refs.myElement.textContent;console.log(text); // 输出: 这是一个 DOM 元素}
};
</script>

3. `$refs` 不是响应式的

$refs 不像 Vue 的响应式数据那样，数据一变页面就跟着更新。$refs 只是一个普通的对象，它的属性值在组件渲染完成后就固定了。所以，如果你想在数据变化的时候更新 $refs 相关的操作，就得手动去处理。

<template><div><button @click="updateElement">更新元素</button><div ref="myElement">{{ message }}</div></div>
</template><script>
export default {data() {return {message: '初始消息'};},methods: {updateElement() {this.message = '更新后的消息';// 手动更新 $refs 相关的操作this.$refs.myElement.textContent = this.message;}}
};
</script>

4. 动态绑定 `ref` 时要注意

要是你需要动态绑定 ref，也就是根据不同的条件给不同的元素或者组件绑定 ref，那得小心了。因为动态绑定 ref 可能会导致 $refs 的值发生变化，所以在使用的时候要确保 $refs 里确实有你想要的元素或者组件。

<template><div><!-- 动态绑定 ref --><component :is="currentComponent" :ref="currentRef"></component><button @click="switchComponent">切换组件</button></div>
</template><script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';export default {data() {return {currentComponent: ComponentA,currentRef: 'componentRef',componentRef: null};},methods: {switchComponent() {this.currentComponent = this.currentComponent === ComponentA ? ComponentB : ComponentA;// 切换组件后，确保 $refs 里有正确的组件实例if (this.$refs.componentRef) {this.$refs.componentRef.someMethod();}}}
};
</script>

5. 在子组件销毁时清理 `$refs`

当子组件被销毁的时候，$refs 里对应的引用不会自动清除。所以，要是你在子组件销毁后还去访问 $refs 里的这个引用，就会报错。为了避免这种情况，你可以在子组件销毁的时候手动清理 $refs 里的引用。

<template><div><child-component ref="childRef"></child-component><button @click="destroyChild">销毁子组件</button></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},methods: {destroyChild() {// 销毁子组件this.$refs.childRef.$destroy();// 手动清理 $refs 里的引用this.$refs.childRef = null;}}
};
</script>

总之，$refs 是个很强大的工具，但使用的时候得注意上面这些点，这样才能避免出现各种奇怪的问题，让你的 Vue 项目更加稳定。

除了$refs，Vue还有哪些可以访问组件实例或DOM元素的方式？

在 Vue 里，除了使用 $refs 访问组件实例或 DOM 元素外，还有以下几种方式：

1. 通过事件机制传递信息

在 Vue 中，你可以利用自定义事件和事件总线在组件间传递数据，从而间接访问组件实例。

自定义事件

子组件能够通过 $emit 触发自定义事件，把数据传递给父组件，父组件在接收到事件后就可以访问子组件实例的属性或方法。

<template><!-- 父组件 --><div><child-component @custom-event="handleCustomEvent"></child-component></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},methods: {handleCustomEvent(childInstance) {// 访问子组件实例console.log(childInstance.someMethod());}}
};
</script>

<template><!-- 子组件 --><div><button @click="sendInstance">发送实例</button></div>
</template><script>
export default {methods: {sendInstance() {// 触发自定义事件，传递当前组件实例this.$emit('custom-event', this);},someMethod() {return '这是子组件的方法';}}
};
</script>

事件总线

事件总线是一个全局的事件中心，组件能够在上面触发和监听事件，以此实现组件间的通信。

// eventBus.js
import Vue from 'vue';
export const eventBus = new Vue();

<template><!-- 发送组件 --><div><button @click="sendMessage">发送消息</button></div>
</template><script>
import { eventBus } from './eventBus.js';export default {methods: {sendMessage() {// 触发事件总线的事件eventBus.$emit('message-sent', this);}}
};
</script>

<template><!-- 接收组件 --><div></div>
</template><script>
import { eventBus } from './eventBus.js';export default {mounted() {// 监听事件总线的事件eventBus.$on('message-sent', (senderInstance) => {console.log(senderInstance.someMethod());});}
};
</script>

2. 使用 `provide` 和 `inject`

provide 和 inject 主要用于实现跨级组件间的通信，父组件能够通过 provide 提供数据，子组件可以使用 inject 注入这些数据。

<template><!-- 父组件 --><div><child-component></child-component></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},provide() {return {parentInstance: this};}
};
</script>

<template><!-- 子组件 --><div></div>
</template><script>
export default {inject: ['parentInstance'],mounted() {// 访问父组件实例console.log(this.parentInstance.someMethod());}
};
</script>

3. 使用 `Vue.observable`（Vue 2）或 `reactive`（Vue 3）

在 Vue 2 里可以使用 Vue.observable 创建一个响应式对象，在 Vue 3 中则使用 reactive。通过这个响应式对象存储组件实例，从而实现对组件实例的访问。

Vue 2

// store.js
import Vue from 'vue';export const store = Vue.observable({componentInstance: null
});

<template><!-- 组件 A --><div><button @click="setInstance">设置实例</button></div>
</template><script>
import { store } from './store.js';export default {methods: {setInstance() {// 将当前组件实例存储到响应式对象中store.componentInstance = this;}}
};
</script>

<template><!-- 组件 B --><div></div>
</template><script>
import { store } from './store.js';export default {mounted() {// 访问存储的组件实例if (store.componentInstance) {console.log(store.componentInstance.someMethod());}}
};
</script>

Vue 3

// store.js
import { reactive } from 'vue';export const store = reactive({componentInstance: null
});

<template><!-- 组件 A --><div><button @click="setInstance">设置实例</button></div>
</template><script setup>
import { store } from './store.js';const setInstance = () => {// 将当前组件实例存储到响应式对象中store.componentInstance = getCurrentInstance();
};
</script>

<template><!-- 组件 B --><div></div>
</template><script setup>
import { store } from './store.js';if (store.componentInstance) {console.log(store.componentInstance.someMethod());
}
</script>

这些方法都有各自的适用场景，你可以根据具体需求来选择合适的方式。

在Vue中，如何避免$refs访问带来的性能问题？

在 Vue 里使用 $refs 访问组件实例或 DOM 元素时，若使用不当可能会引发性能问题。以下是一些避免 $refs 访问带来性能问题的方法：

1. 避免在渲染循环中频繁访问 `$refs`

$refs 本身并非响应式的，但在渲染循环里频繁访问 $refs 会导致不必要的计算和 DOM 操作，从而降低性能。应该把 $refs 的访问逻辑移到事件处理函数或者生命周期钩子函数中。

<template><div><div ref="myElement">示例元素</div><button @click="handleClick">点击</button></div>
</template><script>
export default {methods: {handleClick() {// 在事件处理函数中访问 $refsconst element = this.$refs.myElement;if (element) {// 对元素进行操作element.style.color = 'red';}}}
};
</script>

2. 仅在必要时使用 `$refs`

$refs 主要用于直接访问组件实例或 DOM 元素，不过很多时候可以借助 Vue 的响应式系统来实现相同的功能，从而避免使用 $refs。

示例：动态改变样式

不使用 $refs 的情况：

<template><div><div :style="{ color: textColor }">示例元素</div><button @click="changeColor">改变颜色</button></div>
</template><script>
export default {data() {return {textColor: 'black'};},methods: {changeColor() {this.textColor = 'red';}}
};
</script>

3. 及时清理不再使用的 `$refs`

当组件被销毁时，$refs 里对应的引用不会自动清除。若不清理，可能会造成内存泄漏。所以在组件销毁时要手动清理 $refs。

<template><div><child-component ref="childRef"></child-component><button @click="destroyChild">销毁子组件</button></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},methods: {destroyChild() {// 销毁子组件this.$refs.childRef.$destroy();// 手动清理 $refs 里的引用this.$refs.childRef = null;}}
};
</script>

4. 避免在 `watch` 中频繁访问 `$refs`

watch 用于监听数据变化，若在 watch 里频繁访问 $refs，会导致不必要的性能开销。可以在 watch 中设置 immediate: false，避免初始化时就执行访问操作。

<template><div><div ref="myElement">示例元素</div><input v-model="inputValue" /></div>
</template><script>
export default {data() {return {inputValue: ''};},watch: {inputValue: {handler(newValue) {if (this.$refs.myElement) {// 对元素进行操作this.$refs.myElement.textContent = newValue;}},immediate: false // 避免初始化时执行}}
};
</script>

5. 利用缓存机制

要是需要多次访问 $refs，可以把访问结果缓存起来，避免重复访问。

<template><div><div ref="myElement">示例元素</div><button @click="doSomething">执行操作</button><button @click="doAnotherThing">执行另一个操作</button></div>
</template><script>
export default {data() {return {cachedElement: null};},methods: {getElement() {if (!this.cachedElement) {this.cachedElement = this.$refs.myElement;}return this.cachedElement;},doSomething() {const element = this.getElement();if (element) {// 对元素进行操作element.style.fontSize = '20px';}},doAnotherThing() {const element = this.getElement();if (element) {// 对元素进行另一个操作element.style.backgroundColor = 'yellow';}}}
};
</script>

通过以上这些方法，可以有效避免 $refs 访问带来的性能问题，提升 Vue 应用的性能和稳定性。

大白话Vue 项目中使用$refs来访问组件实例或 DOM 元素，有哪些注意事项？

1. $refs 只有在组件渲染完成后才可用

2. 不要在模板里直接使用 $refs

3. $refs 不是响应式的

4. 动态绑定 ref 时要注意

5. 在子组件销毁时清理 $refs