?系列文章目錄

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

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

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

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

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

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

---

文章目錄

前言

一、組件的生命周期

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

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

3、生命周期圖示

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

2、組件運行階段

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 引用頁面上的組件實例

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

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

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

?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）是指一個組件從? 創(chuàng)建-->運行-->銷毀 ? 的整個階段，強調(diào)的是一個時間段。

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

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

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

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

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

?

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

3、生命周期圖示

參考vue官網(wǎng)

Vue 實例 — Vue.js

?

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

?

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

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

?

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

?

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

2、組件運行階段

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

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

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

?

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

3、組件銷毀階段

當調(diào)用? vm.$destroy 方法時才會被調(diào)用；

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

?

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

只能執(zhí)行一次；

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

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

在項目開發(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 是傳的是簡單類型的值；將值復(fù)制一份進行傳值；（當修改時，子父組件中的值不會被修改）

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

?

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>子組件想父組件傳過來的值---》 {{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:"張三",},//定義變量來接受子組件傳過來的數(shù)據(jù)parent_count:1,role_info:{},}},methods:{ // 通過 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? 模塊，并向外共享一個? Vue? 的實例對象；

2、在數(shù)據(jù) 發(fā)送方 ，調(diào)用? bus.$emit('事件名稱'，發(fā)送的數(shù)據(jù))?? 方法觸發(fā)自定義事件

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

<!-- 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:'誰怕，一蓑煙雨任平生',}},methods:{semd(){// 通過 eventBus 實現(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? 用來輔助開發(fā)者在不依賴? jQuery? 的情況下，獲取? DOM 園所或組件的引用。

每個? vue? 的組件實例上，都包含一個? $refs 對象，里面存儲對應(yīng)的? 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 實現(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? 引用組件的實例

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

?

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

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

?

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

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

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

?

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

?

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

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

?

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

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

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

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é)果, 當前循環(huán)項) => { }, 初始值)

<!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() {// 需求：把購物車數(shù)組中，已勾選的水果，總價累加起來！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((累加的結(jié)果, 當前循環(huán)項) => { }, 初始值)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)建一個新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。

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

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

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

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

---

四、自定義事件

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

使用

在其引用的自定義事件

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

---

總結(jié)

1、生命周期

八個生命周期函數(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ù)名稱"；通過? 函數(shù)名稱? (? 獲取到的值?? ){}

?

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

?

?

總結(jié)

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

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