目錄

• • 一、組件的生命周期& 生命周期函數
  • • 1. 生命周期 & 生命周期函數
    • 2.組件生命周期函數的分類
    • 3.生命周期圖示[重要]
  • 二、組件之間的數據共享
  • • 1. 組件之間的關系
    • 2. 父子組件之間的數據共享
    • • 2.1 父組件向子組件共享數據
      • 2.2 子組件向父組件共享數據
    • 3. 兄弟組件之間的數據共享
    • • 3.1EventBus 的使用步驟
  • 三、ref 引用
  • • 1. 什么是 ref 引用
    • 2. 使用 ref 引用 DOM 元素
    • 3. 使用 ref 引用組件實例
    • 4. 控制文本框和按鈕的按需切換
    • 5. 讓文本框自動獲得焦點
    • 6. this.$nextTick(cb) 方法
    • • 可以寫在updated里面嗎？ 不能
  • 四、總結
  • 五、復習數組
  • • 1.數組的some方法
    • 2.數組中every方法
    • 3.數組的reduce方法
  • 六、購物車案例

一、組件的生命周期& 生命周期函數

1. 生命周期 & 生命周期函數

生命周期（Life Cycle）是指一個組件從創建 -> 運行 -> 銷毀的整個階段，強調的是一個時間段。

生命周期函數：是由 vue 框架提供的內置函數，會伴隨著組件的生命周期，自動按次序執行。

注意：生命周期強調的是時間段，生命周期函數強調的是時間點

2.組件生命周期函數的分類

組件創建之前->組件創建好（內存中）->組件渲染之前->組件渲染到瀏覽器頁面上

組件更新前->組件更新后

組件銷毀前->組件銷毀后

3.生命周期圖示[重要]

可以參考 vue 官方文檔給出的“生命周期圖示”，進一步理解組件生命周期執行的過程：

🔗 生命周期圖示

webpack從main.js開始執行，遇到App根組件，vue-tamplate-compiler解析渲染App根組件，以及根組件中的被使用的子組件（如上例中的Left和Right組件），和子組件中被使用的子組件（如上例中的MyCount組件）——形成一個實例組成的嵌套的樹，最終webpack將該樹解析編譯成純js代碼

創建階段
created階段經常調用 methods 中的方法，請求服務器的數據，并把請求到的數據，轉存到 data 中，( books: [] 存儲所有圖書列表數據，Ajax請求里寫了this則要改成箭頭函數（）=>{})，供 template 模板渲染的時候使用；
此階段不能操作DOM，模板結構尚未生成

mounted階段可以用于操作DOM元素；

運行階段
updated階段完成了組件DOM結構的重新渲染–$el中的數據與data中的數據的同步–更新過后的DOM。

二、組件之間的數據共享

1. 組件之間的關系

在項目開發中，組件之間的最常見的關系分為如下兩種：
① 父子關系
② 兄弟關系

2. 父子組件之間的數據共享

父子組件之間的數據共享又分為：
① 父 -> 子共享數據
② 子 -> 父共享數據

2.1 父組件向子組件共享數據

父組件向子組件共享數據需要使用自定義屬性

簡單類型是賦值復制一份，復雜類型是復制一份引用傳過去，指向同一個內存
props 只讀 不要修改！！！

2.2 子組件向父組件共享數據

子組件向父組件共享數據使用自定義事件

子組件methods里面this.$emit()定義了一個numchange事件,this.count表示傳過去的參數，父事件監聽@事件，只要$emit一觸發,子事件函數就被調用

3. 兄弟組件之間的數據共享

在vue2.x 中，兄弟組件之間數據共享的方案是 EventBus

3.1EventBus 的使用步驟

① 創建 eventBus.js 模塊，并向外共享一個 Vue 的實例對象
② 在數據發送方，調用 bus.$emit('事件名稱', 要發送的數據) 方法觸發自定義事件
③ 在數據接收方，在create之間調用 bus.$on('事件名稱', 事件處理函數) 方法注冊一個自定義事件

三、ref 引用

jQuery操作dom，簡化了程序員操作的過程

vue優勢 vmmv ，在vue中程序員不需要操作dom，只需要把數據維護好【數據驅動視圖】
結論：在vue項目中，不建議大家安裝和使用jQuery。

假設：在vue中，需要操作dom了,需要拿到頁面上某個dom元素的引用，此時應該怎么辦？

1. 什么是 ref 引用

ref 用來輔助開發者在不依賴于 jQuery 的情況下，獲取 DOM 元素或組件的引用。
每個 vue 的組件實例上，都包含一個 $refs 對象，里面存儲著對應的 DOM 元素或組件的引用。默認情況下，組件的 $refs 指向一個空對象

2. 使用 ref 引用 DOM 元素

如果想要使用 ref 引用頁面上的 DOM 元素，this.$refs.引用名稱

3. 使用 ref 引用組件實例

如果想要使用 ref 引用頁面上的組件實例，


App.vue

總結：在父組件中引用子組件時給子組件添加ref屬性，再通過this.$refs.屬性值調用子組件中的方法。

這是在父組件中直接去調子組件中的方法最常用的方式。

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

通過布爾值 inputVisible 來控制組件中的文本框與按鈕的按需切換。

5. 讓文本框自動獲得焦點

當文本框展示出來之后，如果希望它立即獲得焦點，則可以為其添加 ref 引用，并調用原生 DOM 對象的.focus() 方法即可。

報錯！
沒有拿到iptRef這個引用，引用為undefined。在生命周期中，data數據更新后頁面還來得急渲染，就執行this.$refs.iptRef.focus();所以得到的結果undefined。
怎么才能不報錯呢？前提把這行代碼放到頁面更新以后。對此Vue提供了this.$nextTick(cb)方法

6. this.$nextTick(cb) 方法

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

可以寫在updated里面嗎？ 不能

updated里面只要數據變化就會觸發updated剛開始輸入框看不見，點一下看得見，此時數據變化會觸發updated，再點一下，輸入框隱藏，此時數據又變化又會觸發updated獲取焦點，與題設矛盾會報錯！！！

四、總結

能夠知道 vue 中常用的生命周期函數
? 創建階段、運行階段、銷毀階段
? created、mounted

能夠知道如何實現組件之間的數據共享
? 父 -> 子（自定義屬性）
? 子 -> 父（自定義事件）
? 兄弟組件（EventBus）

能夠知道如何使用 ref 引用 DOM 元素或組件
? 給元素或組件添加 ref=“xxx” 的引用名稱
? 通過 this.$refs.xxx 獲取元素或組件的實例
? $nextTick() 函數的執行時機

五、復習數組

1.數組的some方法

<script>const arr = ['小紅', '你大紅', '蘇大強', '寶']// forEach 循環一旦開始，無法在中間被停止arr.forEach((item, index) => {console.log('object')if (item === '蘇大強') {console.log(index)}}) //從數組里面找元素用somearr.some((item, index) => {console.log('ok')if (item === '蘇大強') {console.log(index)// 在找到對應的項之后，可以通過 return true 固定的語法，來終止 some 循環return true}}) </script>

2.數組中every方法

<script>const arr = [{ id: 1, name: '西瓜', state: true },{ id: 2, name: '榴蓮', state: false },{ id: 3, name: '草莓', state: true },]// 需求：判斷數組中，水果是否被全選了！const result = arr.every(item => item.state)//返回值是布爾值 item.state===trueconsole.log(result)</script>

3.數組的reduce方法

<script>const arr = [{ id: 1, name: '西瓜', state: true, price: 10, count: 1 },{ id: 2, name: '榴蓮', state: false, price: 80, count: 2 },{ id: 3, name: '草莓', state: true, price: 20, count: 3 },]// 需求：把購物車數組中，已勾選的水果，總價累加起來！/* let amt = 0 // 總價arr.filter(item => item.state).forEach(item => {amt += item.price * item.count})console.log(amt) */ //過濾一下 得到新數組 第二次循環就是第一次return的值// arr.filter(item => item.state).reduce((累加的結果, 當前循環項) => { }, 初始值)const result = arr.filter(item => item.state).reduce((amt, item) => amt += item.price * item.count, 0)console.log(result)</script>

六、購物車案例

🔗axios 是一個專注于網絡請求的庫

1.安裝并在APP中導入axios npm i axios -S
2.在methods方法中，定義initCarList函數請求列表數據
3.在created生命周期函數中，調用步驟2封裝的initCarList函數

只要請求回來的數據，在頁面渲染期間要用到，則必須轉存到 data 中

Q:有同學使用如下方法：

----------Goods.vue props: {goods:{type:Object,default:{}}, }<h6 class="goods-title">{{ goods.goods_title }}</h6> ----------App.vue <Goods v-for="item in list" :goods="item"></Goods> -----------

思考哪種方法好？---------老師的方法好，上面不利于復用

子向父傳遞數據

未待續完~~~~~感覺內容太多了

總結

以上是生活随笔為你收集整理的生命周期数据共享[父子-子父-兄弟]ref引用数组复习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。