這篇文章主要介紹了Vue中的生命周期和數(shù)據(jù)共享是什么的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇Vue中的生命周期和數(shù)據(jù)共享是什么文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

成都創(chuàng)新互聯(lián)基于成都重慶香港及美國(guó)等地區(qū)分布式IDC機(jī)房數(shù)據(jù)中心構(gòu)建的電信大帶寬，聯(lián)通大帶寬，移動(dòng)大帶寬，多線BGP大帶寬租用,是為眾多客戶提供專(zhuān)業(yè)服務(wù)器托管報(bào)價(jià)，主機(jī)托管價(jià)格性價(jià)比高，為金融證券行業(yè)南充服務(wù)器托管，ai人工智能服務(wù)器托管提供bgp線路100M獨(dú)享，G口帶寬及機(jī)柜租用的專(zhuān)業(yè)成都idc公司。

一、組件的生命周期

1.1 生命周期 & 生命周期函數(shù)

1?? 生命周期（Life Cycle）是指一個(gè)組件從創(chuàng)建 → 運(yùn)行 → 銷(xiāo)毀的整個(gè)階段，強(qiáng)調(diào)的是一個(gè)時(shí)間段。

2?? 生命周期函數(shù)：是由 vue 框架提供的內(nèi)置函數(shù)，會(huì)伴隨著組件的生命周期，自動(dòng)按次序執(zhí)行。

?溫馨提醒?：生命周期強(qiáng)調(diào)的是時(shí)間段，生命周期函數(shù)強(qiáng)調(diào)的是時(shí)間點(diǎn)。

1.2 組件生命周期函數(shù)的分類(lèi)

1.3 生命周期圖示

可以參考 vue 官方文檔給出的“生命周期圖示”，進(jìn)一步理解組件生命周期執(zhí)行的過(guò)程：

#生命周期圖示

二、組件之間的數(shù)據(jù)共享

2.1 組件之間的關(guān)系

在項(xiàng)目開(kāi)發(fā)中，組件之間的最常見(jiàn)的關(guān)系分為如下兩種：

• 父子關(guān)系

• 兄弟關(guān)系

2.2 父子組件之間的數(shù)據(jù)共享

父子組件之間的數(shù)據(jù)共享又分為：

• 父 → 子共享數(shù)據(jù)

• 子 → 父共享數(shù)據(jù)

2.2.1 父組件向子組件共享數(shù)據(jù)

父組件向子組件共享數(shù)據(jù)需要使用自定義屬性。示例代碼如下：

2.2.2 子組件向父組件共享數(shù)據(jù)

子組件向父組件共享數(shù)據(jù)使用自定義事件。示例代碼如下：

2.3 兄弟組件之間的數(shù)據(jù)共享

在 vue2.x 中，兄弟組件之間數(shù)據(jù)共享的方案是EventBus。

?EventBus 的使用步驟?：

1. 創(chuàng)建 eventBus.js 模塊，并向外共享一個(gè) Vue 的實(shí)例對(duì)象；

2. 在數(shù)據(jù)發(fā)送方，調(diào)用 bus.$emit(‘事件名稱’, 要發(fā)送的數(shù)據(jù)) 方法觸發(fā)自定義事件；

3. 在數(shù)據(jù)接收方，調(diào)用 bus.$on(‘事件名稱’, 事件處理函數(shù)) 方法注冊(cè)一個(gè)自定義事件；

三、ref 引用

3.1 什么是 ref 引用

1?? ref 用來(lái)輔助開(kāi)發(fā)者在不依賴于jQuery 的情況下，獲取 DOM 元素或組件的引用。

2?? 每個(gè) vue 的組件實(shí)例上，都包含一個(gè)$refs 對(duì)象，里面存儲(chǔ)著對(duì)應(yīng)的DOM 元素或組件的引用。默認(rèn)情況下，組件的 $refs 指向一個(gè)空對(duì)象。

代碼演示如下：

3.2 使用 ref 引用 DOM 元素

如果想要使用 ref 引用頁(yè)面上的 DOM 元素，則可以按照如下的方式進(jìn)行操作：

代碼演示如下：

3.3 使用 ref 引用組件實(shí)例

如果想要使用 ref 引用頁(yè)面上的組件實(shí)例，則可以按照如下的方式進(jìn)行操作：

3.4 控制文本框和按鈕的按需切換

通過(guò)布爾值 inputVisible 來(lái)控制組件中的文本框與按鈕的按需切換。示例代碼如下：

3.5 讓文本框自動(dòng)獲得焦點(diǎn)

當(dāng)文本框展示出來(lái)之后，如果希望它立即獲得焦點(diǎn)，則可以為其添加 ref 引用，并調(diào)用原生 DOM 對(duì)象的.focus() 方法即可。示例代碼如下：

3.6 this.$nextTick(cb) 方法

組件的 $nextTick(cb) 方法，會(huì)把 cb 回調(diào)推遲到下一個(gè) DOM 更新周期之后執(zhí)行。通俗的理解是：等組件的DOM 更新完成之后，再執(zhí)行 cb 回調(diào)函數(shù)。從而能保證 cb 回調(diào)函數(shù)可以操作到最新的 DOM 元素。

關(guān)于“Vue中的生命周期和數(shù)據(jù)共享是什么”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“Vue中的生命周期和數(shù)據(jù)共享是什么”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。