Vue 項目中使用$refs來訪問組件實例或 DOM 元素，有哪些注意事項？

大白話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>