生命周期 & 數(shù)據(jù)共享

1. 組件的生命周期

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

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

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

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 數(shù)組，存儲的是所有圖書的列表數(shù)據(jù)。默認為空數(shù)組！books: []}},watch: {},methods: {},// 一 創(chuàng)建階段的第1個生命周期函數(shù) 一般無法操作beforeCreate() {},//二、 可以對data methods prop 進行操作created() {// created 生命周期函數(shù)，非常常用。// 經(jīng)常在它里面，調(diào)用 methods 中的方法，請求服務(wù)器的數(shù)據(jù)。// 并且，把請求到的數(shù)據(jù)，轉(zhuǎn)存到 data 中，供 template 模板渲染的時候使用！this.initBookList()},// 三、 無實際意義beforeMount() {},// 四 、 如果要操作當前組件的 DOM，最早，只能在 mounted 階段執(zhí)行 mounted() {},// 五、beforeUpdate() {},// 六、當數(shù)據(jù)變化之后，為了能夠操作到最新的 DOM 結(jié)構(gòu)，必須把代碼寫到 updated 生命周期函數(shù)中updated() {},// 七、beforeDestroy() {},//八、destroyed() {} } </script>

1.4 組件中主要的生命周期函數(shù)

1.5 組件中全部的生命周期函數(shù)

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

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

父子關(guān)系

兄弟關(guān)系

2.2 使用組件的三個步驟

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

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

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

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

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

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

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

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

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

numchange 是父組件中的觸發(fā)事件

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

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

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

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

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

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

npm install mitt@2.1.0

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

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

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

2.5 后代關(guān)系組件之間的數(shù)據(jù)共享

后代關(guān)系組件之間共享數(shù)據(jù)，指的是父節(jié)點的組件向其子孫組件共享數(shù)據(jù)。此時組件之間的嵌套關(guān)系比較復(fù)雜，可以使用 provide 和 inject 實現(xiàn)后代關(guān)系組件之間的數(shù)據(jù)共享。

2.5.1 父節(jié)點通過 provide 共享數(shù)據(jù)

父節(jié)點的組件可以通過 provide 方法，對其子孫組件共享數(shù)據(jù)

2.5.2 子孫節(jié)點通過 inject 接收數(shù)據(jù)

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

2.5.3 父節(jié)點對外共享響應(yīng)式的數(shù)據(jù)

父節(jié)點使用 provide 向下共享數(shù)據(jù)時，可以結(jié)合 computed 函數(shù)向下共享響應(yīng)式的數(shù)據(jù)。示例代碼如下：

2.5.4 子孫節(jié)點使用響應(yīng)式的數(shù)據(jù)

如果父級節(jié)點共享的是響應(yīng)式的數(shù)據(jù)，則子孫節(jié)點必須以 .value 的形式進行使用。示例代碼如下：

3 ref引用

3.1 什么是 ref 引用

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

3.2 使用 ref 引用 DOM 元素

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

3.3 使用 ref 引用組件實例

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

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

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

3.5 讓文本框自動獲得焦點

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

但是這么調(diào)用你會發(fā)現(xiàn)無法成功 原因是雖然設(shè)置了inputVisible是true ，但是還未渲染成功頁面，文本框還未出現(xiàn) 所以會出錯

使用3.6的方法可以解決

3.6 this.$nextTick(cb) 方法

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

4 數(shù)組的幾個方法

4.1 some

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

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

4.2 every

判斷數(shù)組中全部元素的狀態(tài)

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

4.3 reduce

累加數(shù)組

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 }, ]// 需求：把購物車數(shù)組中，已勾選的水果，總價累加起來！ /* let amt = 0 // 總價arr.filter(item => item.state).forEach(item => {amt += item.price * item.count})console.log(amt) */// arr.filter(item => item.state).reduce((累加的結(jié)果, 當前循環(huán)項) => { }, 初始值) const result = arr.filter(item => item.state).reduce((amt, item) => amt += item.price * item.count, 0)console.log(result)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。