?系列文章目錄

day1學習vue2筆記 vue指令

day2 學習vue2 筆記 過濾器 偵聽器 計算屬性 axios

day3 vue2 學習筆記 vue組件

day4 vue 學習筆記 組件 生命周期 數據共享 數組常用方法

day5 vue 筆記 axios 動態組件 插槽 自定義指令 ESLints

day6 vue 學習筆記 vue-router路由

---

文章目錄

前言

一、組件的生命周期

1、生命周期與什么周期函數

2、組件什么周期函數的分類

3、生命周期圖示

1、組件創建階段 常用的生命周期函數有：

2、組件運行階段

3、組件銷毀階段

二、組件之間的數據共享

1、組件之間的關系

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

2.1? 父?? --》 子? 共享數據

2.2? 子? --》 父 共享數據

2.3兄弟之間的數據的共享

三、ref 引用

1、什么是 ref? 引用

2、ref 引用頁面上的組件實例

3、使用ref? 引用組件的實例

4、控制文本輸入框和按鈕的按需切換

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

?6、 this.$nextTick(cb)方法

7、數組中的 some 方法

8、數組的 every 方法

9、數組的 reduce 方法

?10、數組的?? forEach 方法

四、自定義事件

總結

1、生命周期

2、數據共享

---

前言

vue2 學習筆記

生命周期

數據共享

---

一、組件的生命周期

1、生命周期與什么周期函數

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

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

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

2、組件什么周期函數的分類

八個生命周期函數：

• beforeCreate :組件創建之前；
• created? : 組件在內存中創建完成；
• beforeMount? : 組件將要渲染前；
• mounted? :? 組件成功渲染完成；
• beforeUpdate : 更新之前
• update：更新
• deforeDestroy : 生命周期結束前
• destroyed:生命周期結束

?

?當代碼執行到? mounted? 時deforeCreate 、created、beforeMout、mounted? 也會執行。

3、生命周期圖示

參考vue官網

Vue 實例 — Vue.js

?

?在使用使用一個實例的時候就會?? new Vue() 一個實例；

?

1、組件創建階段 常用的生命周期函數有：

created? 函數：經常在其中調用 methods 中的函數來請求服務器的數據，并且請求到的數據保存到data中 供? template 模板渲染使用；（操作 data,props,methods ）

?

?mounted 函數：該函數是最早的的渲染好頁面，需要操作DOM 中的元素最早只能在? mounted 中進行操作 。（操作 DOM 元素）

?

?在創建階段所有創建階段的生命周期函數只運行一遍

2、組件運行階段

如果需要出發該階段，只有? data 改變時才會出發；

?1、deforeUpdate:將要根據變化后，最新的數據，重新渲染組件的模塊結構

2、updata: 已經根據最新的數據，完成了組件的DOM 結構的重新渲染；

?

在該階段時，最多執行 n 次，最少 0 次；

3、組件銷毀階段

當調用? vm.$destroy 方法時才會被調用；

1、deforeDestroy：將要銷毀此組件，此時尚未銷毀，組件還處于正常工作狀態；

?

2、destroyed：組件已經被銷毀，此組件在瀏覽器中對應的? DOM 結構已被 完全移除。

只能執行一次；

二、組件之間的數據共享

1、組件之間的關系

在項目開發中，組件之間的? 最常見的關系? 分為兩種：

• 父子關系
• 兄弟關系

?

如A? B 則是父子關系； B? C 則是兄弟關系。

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

父子組件之間的數據共享分為：

2.1? 父?? --》 子? 共享數據

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

?

?子組件 Son.vue

<template><div><span>Son 組件</span><span>父組件傳值 msg {{msg}} </span><span>父組件傳值 user {{user}} </span></div></template><script>export default {name: "Son",props:['msg','user'],data(){return{msg:this.msg,user:this.user,}},} </script><style scoped></style>

父組件? Parent.vue

<template><div><span>Parent 組件</span><hr><Son :user="user_info" :msg="msg"></Son></div></template><script>import Son from "./Son";export default {name: "Parent",components: {Son,},data(){return{msg:'獲取成功',user_info:{sex:'男',user_name:"張三",}}},} </script><style scoped></style>

?

msg 是傳的是簡單類型的值；將值復制一份進行傳值；（當修改時，子父組件中的值不會被修改）

user_info? 是對象，是復雜類型；在傳值時傳過去的是對象的引用；指向的是一個相同的內存地址；（當修改? 對象等復雜類型? 時則父子組件中的內容都會被更改）

?

2.2? 子? --》 父 共享數據

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

?

<template><div><span>Son 組件</span><span>父組件傳值 msg {{message}} </span><br><span>父組件傳值 user {{user}} </span><br><span>------------傳遞給父組件的內容-------------</span><br><span>{{role_info}}</span><span>cont_Son ---- {{cont_Son}}</span><button @click="add()">+1</button></div></template> <script>export default {name: "Son",props:['msg','user_info'],data(){return{message:this.msg,user:this.user_info,//將數據傳遞給 父組件role_info:{role_name:"管理員",role_state:'可用',},cont_Son:1,}},methods:{add(){// 自定義事件 role_info==》自定義事件名稱this.$emit('numchang',this.cont_Son);this.$emit('role_info',this.role_info);this.cont_Son+=1;},},} </script><style scoped></style> <template><div><span>Parent 組件</span><span>原始的msg {{msg}}</span><span>原始的 user {{user_info}}</span><hr><Son :user_info="user_info" :msg="msg"@numchang="getNewCount"@role_info="getNewRoleInfo"></Son><br><span>-------------------------子組件向父組件---------------------</span><br><span>子組件想父組件傳過來的值---》 {{parent_count}}</span><span>子組件想父組件傳過來的值---》 {{role_info}}</span></div></template><script>import Son from "./Son";export default {name: "Parent",components: {Son,},data(){return{msg:'獲取成功',user_info:{sex:'男',user_name:"張三",},//定義變量來接受子組件傳過來的數據parent_count:1,role_info:{},}},methods:{ // 通過 getNewCount 觸發事件getNewCount(val){this.parent_count=val;},getNewRoleInfo(val){this.role_info=val;},},} </script><style scoped></style>

2.3兄弟之間的數據的共享

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

?

步驟：

?1、創建 EventBus.js? 模塊，并向外共享一個? Vue? 的實例對象；

2、在數據 發送方 ，調用? bus.$emit('事件名稱'，發送的數據)?? 方法觸發自定義事件

3、在數據 接收方 ，調用? bus.$on("事件名稱",事件處理函數)? 方法注冊一個自定義事件

<!-- Left.vue --> <template><div class="left-container"><h3>Left 組件</h3><span>將 Left 中的數據 共享給 Right 中</span><br><span>傳遞的數據：{{msg}}</span><button @click="semd">發送到 Right 組件</button></div> </template> <script>import bus from "./EventBus.js"export default {data(){return{msg:'誰怕，一蓑煙雨任平生',}},methods:{semd(){// 通過 eventBus 實現發送數據bus.$emit('share',this.msg)},}} </script> <style lang="less" scoped> </style> // EventBus.js import Vue from 'vue' //共享數據 export default new Vue() <!-- Right.vue --> <template><div class="right-container"><h3>Right 組件</h3><br><span>-------接收Left 共享的數據-------------</span><br><span>{{msg}}</span></div> <!-- --> </template> <script>import bus from "./EventBus.js"export default {data(){return{msg: '',}},created() {// 2.為bus 綁定 自定義事件bus.$on('share',(res) =>{console.log("Right 觸發了share",res);this.msg=res;})},methods:{},} </script> <style lang="less"> </style>

---

三、ref 引用

1、什么是 ref? 引用

ref? 用來輔助開發者在不依賴? jQuery? 的情況下，獲取? DOM 園所或組件的引用。

每個? vue? 的組件實例上，都包含一個? $refs 對象，里面存儲對應的? DOM 元素或組件的引用。默認情況下，組件的? $refs? 指向一個空對象。

步驟：

• 在需要操作的? DOM 元素起一個? ref 名稱；
• 在需要使用的地方進行使用? ： this.$refs.ref名稱即可獲取

<h1 ref="myRef"> ref 的簡單使用</h1> <button @click="print_this">打印 this</button>print_this(){this.$refs.myRef.style.color='red';console.log(this.$refs.myRef); },

2、ref 引用頁面上的組件實例

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

?

通過? ref 實現父組件修改子組件中的值：

<!-- Test.vue --> <template><div class="test-container"><h3>Test.vue 組件</h3><span>{{count}}</span><button @click="add">test 中count +1</button></div> </template><script>export default {name: "Test",data(){return{count:1,}},methods:{add(){this.count+=1;},},} </script><style lang="less" scoped> </style> <!- 父組件中的 ref 使用--><button @click="testRef">重置 Test 中count 的值</button><Test ref="myTest"></Test>testRef(){console.log(this.$refs.myTest)this.$refs.myTest.count=0;},

3、使用ref? 引用組件的實例

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

?

4、控制文本輸入框和按鈕的按需切換

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

?

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

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

如果出現類似問題：

?

?原因：由于頁面來不及渲染出現的，使其代碼往后延遲即可以執行 this.$nextTick(cd).

?

?6、 this.$nextTick(cb)方法

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

?

7、數組中的 some 方法

獲取返回滿足條件的內容；

終止? some 循環就? return? true

this.arr.some((item,index)=>{if (item=="李四"){//終止 some 循環return true} })

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../../js/vue.js"></script></head><body><div id="app"><button @click="fun01">fun01</button><button @click="fun02">fun02</button></div></body><script>const cm = new Vue({el: '#app',data: {arr : ['小紅', '你大紅', '蘇大強', '寶',"蘇大強"],},methods: {fun01() {// forEach 循環一旦開始，無法在中間被停止var arrs = new Array()this.arr.forEach((item, index) => {console.log('object')if (item === '蘇大強') {console.log(index)arrs.push(item)}console.log("執行次數",index)})console.log(arrs)},fun02() {// 通過 some 實現var arrs = new Array()this.arr.some((item, index) => {console.log("執行次數",index)if (item === '蘇大強') {console.log(index)arrs.push(item)// 在找到對應的項之后，可以通過 return true 固定的語法，來終止 some 循環return true}})console.log(arrs)},},})</script></html>

8、數組的 every 方法

判斷數組中的 每一項是否滿足需求；

var result = arr.every(item => item.屬性)item => item.屬性 表示判斷條件返回值是 true false

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../../js/vue.js"></script></head><body><div id="app"><button @click="fun01">fun01</button></div></body><script>const cm = new Vue({el: '#app',data: {arr: [{id: 1,name: '西瓜',state: true,num: 3,},{id: 2,name: '榴蓮',state: true,num: 1,},{id: 3,name: '草莓',state: true,num: 2,},],},methods: {fun01() {// 需求：判斷數組中，水果是否被全選了！var result = this.arr.every((item,index) => {console.log(index)if (item.num >= 1) {return true;}})// 返回 false trueconsole.log(result)},},})</script></html>

9、數組的 reduce 方法

累加器

arr.reduce((累加的結果, 當前循環項) => { }, 初始值)

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script src="../../js/vue.js"></script></head><body><div id="app"><button @click="fun01">fun01</button><button @click="fun02">fun02</button></div></body><script>const cm = new Vue({el: '#app',data: {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},],},methods: {fun01() {// 需求：把購物車數組中，已勾選的水果，總價累加起來！let amt = 0 // 總價this.arr.filter(item => item.state).forEach(item => {amt += item.price * item.count})console.log(amt)},fun02() { // arr.filter(item => item.state).reduce((累加的結果, 當前循環項) => { }, 初始值)const result = this.arr.filter(item => item.state).reduce((amt, item) => amt += item.price * item.count, 0)console.log(result)// 獲取 選中的var arrs = this.arr.filter(item => item.state);var results = arrs.reduce((amt, item) => amt += item.price * item.count, 0);console.log(results)},},})</script> </html>

?10、數組的?? forEach 方法

// 循環更改 list 中goods_state 的值 this.list.forEach(item => item.goods_state=v);

?11、數組的 filter方法

??filter()創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。

array.filter(function(currentValue,index,arr), thisValue);

filter() 方法用于把Array中的某些元素過濾掉，然后返回剩下的未被過濾掉的元素。

1、filter() 不會對空數組進行檢測；

2、filter() 不會改變原始數組。

---

四、自定義事件

this.$emit("自定義事件名稱",傳值內容)

使用

在其引用的自定義事件

<組件標簽??? @自定義事件名稱="觸發方法"></組件標簽>

---

總結

1、生命周期

八個生命周期函數：

• beforeCreate :組件創建之前；
• created? : 組件在內存中創建完成；
• beforeMount? : 組件將要渲染前；
• mounted? :? 組件成功渲染完成；
• beforeUpdate : 更新之前
• update：更新
• deforeDestroy : 生命周期結束前
• destroyed:生命周期結束

2、數據共享

1、父?? -------》 子 ：自定義屬性?? props

?

2、子? -------》 父： 自定義事件：? this.$emit('事件名稱',需要傳輸的值)，@事件名稱="函數名稱"；通過? 函數名稱? (? 獲取到的值?? ){}

?

3、兄弟組件之間共享數據：? EventBus:

?

?

總結

以上是生活随笔為你收集整理的day4 vue 学习笔记 组件 生命周期 数据共享 数组常用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

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