Vue?生命周期和數(shù)據(jù)共享詳解
1. 組件的生命周期
1.1 生命周期與生命周期函數(shù)
生命周期是指一個組件從 創(chuàng)建 => 運行 => 銷毀 的整個時間段,強調(diào)的是一個時間段。生命周期函數(shù)是由 vue 框架提供的內(nèi)置函數(shù),會伴隨著組件的生命周期,自動按次序執(zhí)行。
1.2 組件生命周期函數(shù)的分類
1.3 生命周期圖示以及詳解
組件創(chuàng)建階段
beforeCreted
props/data/methods … 都未被創(chuàng)建,啥也干不了created
- props/data/methods … 都創(chuàng)建好了
- 經(jīng)常在此函數(shù)里調(diào)用 methods 中的方法,請求服務(wù)器中的數(shù)據(jù)。
- 并且把請求到的數(shù)據(jù)轉(zhuǎn)存在 data 中,提供 template 模板渲染的時候使用。
- 但是模板結(jié)構(gòu)尚未生成,不能訪問 DOM 結(jié)構(gòu),DOM 結(jié)構(gòu)均為 null
beforeMount
將要把內(nèi)存中編譯好的 HTML 結(jié)構(gòu)渲染到瀏覽器中mounted
- 已經(jīng)把內(nèi)存中的 HTML 結(jié)構(gòu)成功的渲染到了瀏覽器中
- 此時瀏覽器中已經(jīng)包含了當前組件的 DOM 結(jié)構(gòu)
- 這也是最早可以操作 DOM 的時候
組件運行階段
beforeUpdata
- 將要根據(jù)變化過最新的數(shù)據(jù)重新渲染組件的模板結(jié)構(gòu)
- data是最新的 ui結(jié)構(gòu)中的內(nèi)容還是舊的
updataed
- 已經(jīng)根據(jù)最新的數(shù)據(jù)完成了組件的 DOM 結(jié)構(gòu)的重新渲染
- 最新的 data 最新的 ui結(jié)構(gòu)
- 當數(shù)據(jù)變化之后,操作最新的 DOM 結(jié)構(gòu)
組件銷毀階段
beforeDestory
將要銷毀這個組件,此時尚未銷毀組件還處于正常工作的狀態(tài)
destoryed
組件已經(jīng)完全被銷毀,此時組件在瀏覽器中對應(yīng)的 DOM 結(jié)構(gòu)已經(jīng)完全移除
2. 組件之間的數(shù)據(jù)共享
2.1 組件之間的關(guān)系
在項目的開發(fā)中,組件之間的最常見的關(guān)系分為如下兩種:
- 父子關(guān)系
- 兄弟關(guān)系
2.2 父向子傳值
使用自定義屬性
- 簡單類型是復(fù)制,復(fù)雜類型是傳的引用。
- 不要修改 props 的值
- 父組件通過 v-bind 綁定數(shù)值
<Son :msg="message" :user="userinfo"></Son>
export default { data() { return { message: 'hello son', userinfo: { name: 'pingting', age: 18 } } } }
子組件通過 props 聲明自定義屬性
<div> <h3>Son 組件</h3> <p>父組件傳過來的 msg: {{ msg}} </p> <p>父組件傳過來的 user:{{ user}} </p> </div>
export default { props: ['msg' , 'user'] }
2.3 子向父傳值
使用自定義事件
子組件通過 $emit
將值傳遞給父組件
當 click事件觸發(fā) => 調(diào)用 add 函數(shù) => 觸發(fā) numChange 事件 =>
this.count作為實參傳遞給 getNewCount 函數(shù) => 形參為 val
export default { data(){ return { // 子組件的數(shù)據(jù) count: 0 } }, methods: { add(){ this.count += 1 // 觸發(fā)一個自定義事件并且傳遞參數(shù) this.$emit('numChange' , this.count) } } }
父組件
@ 綁定自定義事件
<Right @numChange="getNewCount"></Right>
export default { data() { return { // 接收 right 傳過來的 count countFather: 0 } }, methods: { getNewCount(val){ this.countFather = val } } }
2.4 兄弟之間的數(shù)據(jù)關(guān)系
在 vue2.x 使用 eventBus
創(chuàng)建 eventBus.js
模塊,并向外共享一個 Vue 的實例對象
import Vue from 'vue' export default new Vue()
在數(shù)據(jù)發(fā)送方,調(diào)用 bus.$emit('事件名稱',發(fā)送的數(shù)據(jù))
方法觸發(fā)自定義事件
<button @click="sendStr">發(fā)送數(shù)據(jù)給 Right </button>
import bus from './eventBus.js' export default { data(){ return { str: '這是Son的str數(shù)據(jù),將要共享出去' } }, methods: { sendStr(){ // 通過 eventBus 發(fā)送數(shù)據(jù) bus.$emit('share' , this.str) } } }
在數(shù)據(jù)接收方,調(diào)用 bus.$on('事件名稱',事件處理函數(shù))
方法注冊一個自定義事件
<p>從 Son 接受的數(shù)據(jù):{{ strFromSon }} </p>
import bus from './eventBus.js' export default { data(){ return { strFromSon: '' } }, created() { bus.$on('share' , (val) => { this.strFromSon = val }) } }
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
Vue.js Ajax動態(tài)參數(shù)與列表顯示實現(xiàn)方法
Vue.js是一個輕巧、高性能、可組件化的MVVM庫,同時擁有非常容易上手的API。下面通過本文給大家介紹vue.js ajax動態(tài)參數(shù)與列表顯示實現(xiàn)方法,感興趣的朋友一起看看吧2016-10-10vue?axios?form-data格式傳輸數(shù)據(jù)和文件方式
這篇文章主要介紹了vue?axios?form-data格式傳輸數(shù)據(jù)和文件方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05