?系列文章目錄

day1學(xué)習(xí)vue2筆記 vue指令

day2 學(xué)習(xí)vue2 筆記 過(guò)濾器 偵聽器 計(jì)算屬性 axios

day3 vue2 學(xué)習(xí)筆記 vue組件

day4 vue 學(xué)習(xí)筆記 組件 生命周期 數(shù)據(jù)共享 數(shù)組常用方法

day5 vue 筆記 axios 動(dòng)態(tài)組件 插槽 自定義指令 ESLints

day6 vue 學(xué)習(xí)筆記 vue-router路由

---

文章目錄

前言

一、組件的生命周期

1、生命周期與什么周期函數(shù)

2、組件什么周期函數(shù)的分類

3、生命周期圖示

1、組件創(chuàng)建階段 常用的生命周期函數(shù)有：

2、組件運(yùn)行階段

3、組件銷毀階段

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

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

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

2.1? 父?? --》 子? 共享數(shù)據(jù)

2.2? 子? --》 父 共享數(shù)據(jù)

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

三、ref 引用

1、什么是 ref? 引用

2、ref 引用頁(yè)面上的組件實(shí)例

3、使用ref? 引用組件的實(shí)例

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

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

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

7、數(shù)組中的 some 方法

8、數(shù)組的 every 方法

9、數(shù)組的 reduce 方法

?10、數(shù)組的?? forEach 方法

四、自定義事件

總結(jié)

1、生命周期

2、數(shù)據(jù)共享

---

前言

vue2 學(xué)習(xí)筆記

生命周期

數(shù)據(jù)共享

---

一、組件的生命周期

1、生命周期與什么周期函數(shù)

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

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

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

2、組件什么周期函數(shù)的分類

八個(gè)生命周期函數(shù)：

• beforeCreate :組件創(chuàng)建之前；
• created? : 組件在內(nèi)存中創(chuàng)建完成；
• beforeMount? : 組件將要渲染前；
• mounted? :? 組件成功渲染完成；
• beforeUpdate : 更新之前
• update：更新
• deforeDestroy : 生命周期結(jié)束前
• destroyed:生命周期結(jié)束

?

?當(dāng)代碼執(zhí)行到? mounted? 時(shí)deforeCreate 、created、beforeMout、mounted? 也會(huì)執(zhí)行。

3、生命周期圖示

參考vue官網(wǎng)

Vue 實(shí)例 — Vue.js

?

?在使用使用一個(gè)實(shí)例的時(shí)候就會(huì)?? new Vue() 一個(gè)實(shí)例；

?

1、組件創(chuàng)建階段 常用的生命周期函數(shù)有：

created? 函數(shù)：經(jīng)常在其中調(diào)用 methods 中的函數(shù)來(lái)請(qǐng)求服務(wù)器的數(shù)據(jù)，并且請(qǐng)求到的數(shù)據(jù)保存到data中 供? template 模板渲染使用；（操作 data,props,methods ）

?

?mounted 函數(shù)：該函數(shù)是最早的的渲染好頁(yè)面，需要操作DOM 中的元素最早只能在? mounted 中進(jìn)行操作 。（操作 DOM 元素）

?

?在創(chuàng)建階段所有創(chuàng)建階段的生命周期函數(shù)只運(yùn)行一遍

2、組件運(yùn)行階段

如果需要出發(fā)該階段，只有? data 改變時(shí)才會(huì)出發(fā)；

?1、deforeUpdate:將要根據(jù)變化后，最新的數(shù)據(jù)，重新渲染組件的模塊結(jié)構(gòu)

2、updata: 已經(jīng)根據(jù)最新的數(shù)據(jù)，完成了組件的DOM 結(jié)構(gòu)的重新渲染；

?

在該階段時(shí)，最多執(zhí)行 n 次，最少 0 次；

3、組件銷毀階段

當(dāng)調(diào)用? vm.$destroy 方法時(shí)才會(huì)被調(diào)用；

1、deforeDestroy：將要銷毀此組件，此時(shí)尚未銷毀，組件還處于正常工作狀態(tài)；

?

2、destroyed：組件已經(jīng)被銷毀，此組件在瀏覽器中對(duì)應(yīng)的? DOM 結(jié)構(gòu)已被 完全移除。

只能執(zhí)行一次；

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

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

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

• 父子關(guān)系
• 兄弟關(guān)系

?

如A? B 則是父子關(guān)系； B? C 則是兄弟關(guān)系。

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

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

2.1? 父?? --》 子? 共享數(shù)據(jù)

父組件向子組件共享數(shù)據(jù)需要使用 自定義屬性

?

?子組件 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 是傳的是簡(jiǎn)單類型的值；將值復(fù)制一份進(jìn)行傳值；（當(dāng)修改時(shí)，子父組件中的值不會(huì)被修改）

user_info? 是對(duì)象，是復(fù)雜類型；在傳值時(shí)傳過(guò)去的是對(duì)象的引用；指向的是一個(gè)相同的內(nèi)存地址；（當(dāng)修改? 對(duì)象等復(fù)雜類型? 時(shí)則父子組件中的內(nèi)容都會(huì)被更改）

?

2.2? 子? --》 父 共享數(shù)據(jù)

子組件想父組件共享數(shù)據(jù)使用自定義事件。

?

<template><div><span>Son 組件</span><span>父組件傳值 msg {{message}} </span><br><span>父組件傳值 user {{user}} </span><br><span>------------傳遞給父組件的內(nèi)容-------------</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,//將數(shù)據(jù)傳遞給 父組件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>子組件想父組件傳過(guò)來(lái)的值---》 {{parent_count}}</span><span>子組件想父組件傳過(guò)來(lái)的值---》 {{role_info}}</span></div></template><script>import Son from "./Son";export default {name: "Parent",components: {Son,},data(){return{msg:'獲取成功',user_info:{sex:'男',user_name:"張三",},//定義變量來(lái)接受子組件傳過(guò)來(lái)的數(shù)據(jù)parent_count:1,role_info:{},}},methods:{ // 通過(guò) getNewCount 觸發(fā)事件getNewCount(val){this.parent_count=val;},getNewRoleInfo(val){this.role_info=val;},},} </script><style scoped></style>

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

在? vue2.x? 中，兄弟組件之間數(shù)據(jù)共享的方案是? 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è)自定義事件

<!-- Left.vue --> <template><div class="left-container"><h3>Left 組件</h3><span>將 Left 中的數(shù)據(jù) 共享給 Right 中</span><br><span>傳遞的數(shù)據(jù)：{{msg}}</span><button @click="semd">發(fā)送到 Right 組件</button></div> </template> <script>import bus from "./EventBus.js"export default {data(){return{msg:'誰(shuí)怕，一蓑煙雨任平生',}},methods:{semd(){// 通過(guò) eventBus 實(shí)現(xiàn)發(fā)送數(shù)據(jù)bus.$emit('share',this.msg)},}} </script> <style lang="less" scoped> </style> // EventBus.js import Vue from 'vue' //共享數(shù)據(jù) export default new Vue() <!-- Right.vue --> <template><div class="right-container"><h3>Right 組件</h3><br><span>-------接收Left 共享的數(shù)據(jù)-------------</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 觸發(fā)了share",res);this.msg=res;})},methods:{},} </script> <style lang="less"> </style>

---

三、ref 引用

1、什么是 ref? 引用

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

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

步驟：

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

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

2、ref 引用頁(yè)面上的組件實(shí)例

如果想要使用?? ref? 引用頁(yè)面上的組件實(shí)例。

?

通過(guò)? ref 實(shí)現(xiàn)父組件修改子組件中的值：

<!-- 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? 引用組件的實(shí)例

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

?

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

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

?

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

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

如果出現(xiàn)類似問(wèn)題：

?

?原因：由于頁(yè)面來(lái)不及渲染出現(xiàn)的，使其代碼往后延遲即可以執(zhí)行 this.$nextTick(cd).

?

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

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

?

7、數(shù)組中的 some 方法

獲取返回滿足條件的內(nèi)容；

終止? some 循環(huán)就? return? true

this.arr.some((item,index)=>{if (item=="李四"){//終止 some 循環(huán)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 : ['小紅', '你大紅', '蘇大強(qiáng)', '寶',"蘇大強(qiáng)"],},methods: {fun01() {// forEach 循環(huán)一旦開始，無(wú)法在中間被停止var arrs = new Array()this.arr.forEach((item, index) => {console.log('object')if (item === '蘇大強(qiáng)') {console.log(index)arrs.push(item)}console.log("執(zhí)行次數(shù)",index)})console.log(arrs)},fun02() {// 通過(guò) some 實(shí)現(xiàn)var arrs = new Array()this.arr.some((item, index) => {console.log("執(zhí)行次數(shù)",index)if (item === '蘇大強(qiáng)') {console.log(index)arrs.push(item)// 在找到對(duì)應(yīng)的項(xiàng)之后，可以通過(guò) return true 固定的語(yǔ)法，來(lái)終止 some 循環(huán)return true}})console.log(arrs)},},})</script></html>

8、數(shù)組的 every 方法

判斷數(shù)組中的 每一項(xiàng)是否滿足需求；

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() {// 需求：判斷數(shù)組中，水果是否被全選了！var result = this.arr.every((item,index) => {console.log(index)if (item.num >= 1) {return true;}})// 返回 false trueconsole.log(result)},},})</script></html>

9、數(shù)組的 reduce 方法

累加器

arr.reduce((累加的結(jié)果, 當(dāng)前循環(huán)項(xiàng)) => { }, 初始值)

<!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() {// 需求：把購(gòu)物車數(shù)組中，已勾選的水果，總價(jià)累加起來(lái)！let amt = 0 // 總價(jià)this.arr.filter(item => item.state).forEach(item => {amt += item.price * item.count})console.log(amt)},fun02() { // arr.filter(item => item.state).reduce((累加的結(jié)果, 當(dāng)前循環(huán)項(xiàng)) => { }, 初始值)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、數(shù)組的?? forEach 方法

// 循環(huán)更改 list 中g(shù)oods_state 的值 this.list.forEach(item => item.goods_state=v);

?11、數(shù)組的 filter方法

??filter()創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過(guò)檢查指定數(shù)組中符合條件的所有元素。

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

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

1、filter() 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)；

2、filter() 不會(huì)改變?cè)紨?shù)組。

---

四、自定義事件

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

使用

在其引用的自定義事件

<組件標(biāo)簽??? @自定義事件名稱="觸發(fā)方法"></組件標(biāo)簽>

---

總結(jié)

1、生命周期

八個(gè)生命周期函數(shù)：

• beforeCreate :組件創(chuàng)建之前；
• created? : 組件在內(nèi)存中創(chuàng)建完成；
• beforeMount? : 組件將要渲染前；
• mounted? :? 組件成功渲染完成；
• beforeUpdate : 更新之前
• update：更新
• deforeDestroy : 生命周期結(jié)束前
• destroyed:生命周期結(jié)束

2、數(shù)據(jù)共享

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

?

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

?

3、兄弟組件之間共享數(shù)據(jù)：? EventBus:

?

?

總結(jié)

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

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