生命周期 & 數據共享

1. 組件的生命周期

1.1 生命周期 & 生命周期函數

生命周期（Life Cycle）是指一個組件從創建 -> 運行 -> 銷毀的整個階段，強調的是一個時間段。
生命周期函數：是由 vue 框架提供的內置函數，會伴隨著組件的生命周期，自動按次序執行。
注意：生命周期強調的是時間段，生命周期函數強調的是時間點。

1.2 組件生命周期函數的分類

1.3 生命周期

<template><div class="test-container"><h3 id="myh3">Test.vue 組件 --- {{ books.length }} 本圖書</h3><p id="pppp">message 的值是：{{ message }}</p><button @click="message += '~'">修改 message 的值</button></div> </template><script> export default {props: ['info'],data() {return {message: 'hello vue.js',// 定義 books 數組，存儲的是所有圖書的列表數據。默認為空數組！books: []}},watch: {},methods: {},// 一 創建階段的第1個生命周期函數 一般無法操作beforeCreate() {},//二、 可以對data methods prop 進行操作created() {// created 生命周期函數，非常常用。// 經常在它里面，調用 methods 中的方法，請求服務器的數據。// 并且，把請求到的數據，轉存到 data 中，供 template 模板渲染的時候使用！this.initBookList()},// 三、 無實際意義beforeMount() {},// 四 、 如果要操作當前組件的 DOM，最早，只能在 mounted 階段執行 mounted() {},// 五、beforeUpdate() {},// 六、當數據變化之后，為了能夠操作到最新的 DOM 結構，必須把代碼寫到 updated 生命周期函數中updated() {},// 七、beforeDestroy() {},//八、destroyed() {} } </script>

1.4 組件中主要的生命周期函數

1.5 組件中全部的生命周期函數

2 組件之間的數據共享

2.1 組件之間的關系

父子關系

兄弟關系

2.2 使用組件的三個步驟

通過 components 注冊的是私有子組件

2.3 父子組件之間的數據共享

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

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

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

自定義屬性 : 即父組件可以通過v-bind傳遞數值 在子組件中用props接收數值

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

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

自定義事件 : 子組件用$emit觸發自定義事件 父組件用自定義事件來接收

numchange 是父組件中的觸發事件

2.4 兄弟組件之間的數據共享

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

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

注意 在新版本的3.0中可以使用vuex進行兄弟之間傳值 vuex更好用 我的博客中也有關于vuex的介紹與使用

2.4 兄弟組件之間的數據共享(vue3)

（1）安裝 mitt 依賴包
在項目中運行如下的命令，安裝 mitt 依賴包：

npm install mitt@2.1.0

(2) 創建公共的 EventBus 模塊
在項目中創建公共的 eventBus 模塊如下：

(3) 在數據接收方自定義事件
在數據接收方，調用bus.on(‘事件名稱’, 事件處理函數) 方法注冊一個自定義事件。示例代碼如下：

(4) 在數據接發送方觸發事件
在數據發送方，調用 bus.emit(‘事件名稱’, 要發送的數據) 方法觸發自定義事件。示例代碼如下：

2.5 后代關系組件之間的數據共享

后代關系組件之間共享數據，指的是父節點的組件向其子孫組件共享數據。此時組件之間的嵌套關系比較復雜，可以使用 provide 和 inject 實現后代關系組件之間的數據共享。

2.5.1 父節點通過 provide 共享數據

父節點的組件可以通過 provide 方法，對其子孫組件共享數據

2.5.2 子孫節點通過 inject 接收數據

子孫節點可以使用 inject 數組，接收父級節點向下共享的數據。示例代碼如下：

2.5.3 父節點對外共享響應式的數據

父節點使用 provide 向下共享數據時，可以結合 computed 函數向下共享響應式的數據。示例代碼如下：

2.5.4 子孫節點使用響應式的數據

如果父級節點共享的是響應式的數據，則子孫節點必須以 .value 的形式進行使用。示例代碼如下：

3 ref引用

3.1 什么是 ref 引用

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

3.2 使用 ref 引用 DOM 元素

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

3.3 使用 ref 引用組件實例

如果想要使用 ref 引用頁面上的組件實例，則可以按照如下的方式進行操作：

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

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

3.5 讓文本框自動獲得焦點

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

但是這么調用你會發現無法成功 原因是雖然設置了inputVisible是true ，但是還未渲染成功頁面，文本框還未出現 所以會出錯

使用3.6的方法可以解決

3.6 this.$nextTick(cb) 方法

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

4 數組的幾個方法

4.1 some

用這個可以停止 不會白白浪費性能

const arr = ['小紅', '你大紅', '蘇大強', '寶']// forEach 循環一旦開始，無法在中間被停止 /* arr.forEach((item, index) => {console.log('object')if (item === '蘇大強') {console.log(index)}}) */// 用這個可以停止 不會白白浪費性能 arr.some((item, index) => {console.log('ok')if (item === '蘇大強') {console.log(index)// 在找到對應的項之后，可以通過 return true 固定的語法，來終止 some 循環return true}})

4.2 every

判斷數組中全部元素的狀態

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

4.3 reduce

累加數組

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) */// 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)

總結

以上是生活随笔為你收集整理的vue入门之04-生命周期 数据共享的全部內容，希望文章能夠幫你解決所遇到的問題。

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