腳本之家服務器常用軟件

快捷導航

Vue?生命周期和數據共享詳解

更新時間：2022年02月22日 15:13:14 作者：pingting_

這篇文章主要為大家詳細介紹了Vue生命周期和數據共享，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

1. 組件的生命周期

1.1 生命周期與生命周期函數

生命周期是指一個組件從 創(chuàng)建 => 運行 => 銷毀的整個時間段，強調的是一個時間段。生命周期函數是由 vue 框架提供的內置函數，會伴隨著組件的生命周期，自動按次序執(zhí)行。

1.2 組件生命周期函數的分類

在這里插入圖片描述

1.3 生命周期圖示以及詳解

在這里插入圖片描述

組件創(chuàng)建階段

beforeCreted props/data/methods … 都未被創(chuàng)建，啥也干不了
created
- props/data/methods … 都創(chuàng)建好了
- 經常在此函數里調用 methods 中的方法，請求服務器中的數據。
- 并且把請求到的數據轉存在 data 中，提供 template 模板渲染的時候使用。
- 但是模板結構尚未生成，不能訪問 DOM 結構，DOM 結構均為 null
beforeMount 將要把內存中編譯好的 HTML 結構渲染到瀏覽器中
mounted
- 已經把內存中的 HTML 結構成功的渲染到了瀏覽器中
- 此時瀏覽器中已經包含了當前組件的 DOM 結構
- 這也是最早可以操作 DOM 的時候

組件運行階段

beforeUpdata
- 將要根據變化過最新的數據重新渲染組件的模板結構
- data是最新的 ui結構中的內容還是舊的
updataed
- 已經根據最新的數據完成了組件的 DOM 結構的重新渲染
- 最新的 data 最新的 ui結構
- 當數據變化之后，操作最新的 DOM 結構

組件銷毀階段

beforeDestory 將要銷毀這個組件，此時尚未銷毀組件還處于正常工作的狀態(tài)

destoryed 組件已經完全被銷毀，此時組件在瀏覽器中對應的 DOM 結構已經完全移除

2. 組件之間的數據共享

2.1 組件之間的關系

在項目的開發(fā)中，組件之間的最常見的關系分為如下兩種：

父子關系
兄弟關系

2.2 父向子傳值

使用自定義屬性

簡單類型是復制，復雜類型是傳的引用。
不要修改 props 的值
父組件通過 v-bind 綁定數值

<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ā) => 調用 add 函數 => 觸發(fā) numChange 事件 =>

this.count作為實參傳遞給 getNewCount 函數 => 形參為 val

export default {
    data(){
        return {
            // 子組件的數據
            count: 0
        }
    },
    methods: {
        add(){
            this.count += 1
            // 觸發(fā)一個自定義事件并且傳遞參數
            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 兄弟之間的數據關系

在 vue2.x 使用 eventBus

在這里插入圖片描述

創(chuàng)建 eventBus.js 模塊，并向外共享一個 Vue 的實例對象

import Vue from 'vue'
export default new Vue()

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

<button @click="sendStr">發(fā)送數據給 Right </button>

import bus from './eventBus.js'
export default {
    data(){
        return {
            str: '這是Son的str數據，將要共享出去'
        }
    },
    methods: {
        sendStr(){
            // 通過 eventBus 發(fā)送數據
            bus.$emit('share' , this.str)
        }
    }
}

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

<p>從 Son 接受的數據：{{ strFromSon }} </p>

import bus from './eventBus.js'
export default {
    data(){
        return {
            strFromSon: ''
        }
    },
    created() {
        bus.$on('share' , (val) => {
            this.strFromSon = val
        })
    }
}