Vue03

10.組件化編程

10.1基本說明

官網鏈接：https://v2.cn.vuejs.org/v2/guide/components-registration.html

在大型應用開發時，頁面可以劃分成很多部分，不同的頁面，往往也會有相同的部分——例如可能會有相同的頭部導航
如果每個頁面都獨自開發，無疑增加了我們的開發成本，因此，我們會把頁面的不同部分拆分成獨立的組件，然后在不同的頁面共享這些組件，避免重復開發
- 組件（Component）是Vue.js最強大的功能之一（組件提高了復用性：界面復用性和代碼復用性）
- 組件也是一個Vue實體，也包括：data，methods，生命周期函式等
- 組件渲染需要html模板，所以增加了template屬性，屬性的值就是HTML模板
- 對于全域組件，任何Vue實體都可以直接在HTML中通過組件名稱來使用該組件
- data在組件中是一個函式，不再是一個物件，這樣每次參考組件都是獨立的物件/資料

10.2應用實體

為什么需要組件化編程？

例子

現在希望實作一個功能：點擊一個按鈕，可以顯示點擊的次數，如果要求多個按鈕都實作該功能呢？

10.2.1非組件化方式

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>組件化編程-普通方式</title>
</head>
<body>
<div id="app">
    <!--非組件化方式-普通方式-->
    <button v-on:click="count++">點擊次數={{count}}次[非組件化方式]</button><br/>
    <!--
    1.如果需要多個按鈕都實作同樣的功能，直接粘貼復制是不可行的，
        因為這樣的話按鈕都系結了同一個資料count，
        當其中一個按鈕按下，其他按鈕顯示的資料也會跟著改變，
    2.我們現在的要求是：不同的按鈕的資料應該分開計算，又該怎么實作？--可以在資料池中增加不同的屬性
    -->
    <button v-on:click="count2 ++">點擊次數={{count2}}次[非組件化方式]</button><br/>
    <!--3.但是新的問題又出現了，當又要增加多個同樣功能的按鈕時，怎么實作呢？
    仍然像之前一樣，在資料池中不停地增加新的屬性嗎？-->
    <button v-on:click="count3 ++">點擊次數={{count3}}次[非組件化方式]</button>
</div>
<script src="https://www.cnblogs.com/liyuelian/archive/2023/01/09/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {//data資料池
            count: 0,
            count2: 0,
            count3: 0
        }
    })
</script>
</body>
</html>

如上所述，多個按鈕的界面和業務功能都是類似的，但是我們都重新寫了一次，代碼復用性差，如果是在復雜的案例中，問題將會更加明顯，解決方案就是——組件化編程，

10.2.2全域組件方式

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>組件化編程-全域組件</title>
</head>
<body>
<div id="app">
    <h1>組件化-全域組件</h1>
    <!--使用全域組件-->
    <!--vue決議時，會用模板template來替換這個"counter"標識-->
    <counter></counter><br/>
    <counter></counter><br/>
    <counter></counter>
</div>
<script src="https://www.cnblogs.com/liyuelian/archive/2023/01/09/vue.js"></script>
<script>
    // 1.定義一個全域組件，名為 counter
    // 2.{} 表示的就是 組件相關的內容
    // 3.template 用于指定該組件的界面，因為會參考到資料池的資料，所以使用模板字串
    // 4.注意：要把組件視為Vue實體，也有自己的資料池和 方法 methods
    // 5.對于組件，我們的資料池資料是使用函式/方法回傳的（目的是為了保證每一個組件的資料是獨立的！）,不能使用原來的方式
    // 6.這時我們就實作了 界面通過template實作共享，業務處理可以復用 的目的
    // 7.全域組件是屬于所有的vue實體的，因此可以在任何一個vue實體中使用：
    //   例如當前頁面中有一個vue實體，如果我們再宣告幾個vue實體，該全域組件都可以在這些vue實體中使用
    Vue.component("counter", {
        //組件渲染需要html模板，所以增加了template屬性，值就是HTML模板
        template: `<button v-on:click="click()">點擊次數={{count}}次[全域組件化方式]</button>`,
        data() {//注意和原來的方式不一樣
            return {count: 0}
        },
        methods: {//方法可以共享，但data資料不能共享
            click() {
                this.count++;//每一個組件的this物件不同，因此同一個方法改變的是不同的count
            }
        }
    })

    //創建vue實體，必須有
    let vm = new Vue({
        el: "#app"
    })
</script>
</body>
</html>

10.2.3區域組件方式

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>組件化編程-區域組件</title>
</head>
<body>
<div id="app">
    <h1>組件化-區域組件</h1>
    <!--使用區域組件，該組件是從 被掛載到 div（id=app）的vue實體中來的-->
    <my_counter></my_counter><br/>
    <my_counter></my_counter><br/>
    <my_counter></my_counter>
</div>
<script src="https://www.cnblogs.com/liyuelian/archive/2023/01/09/vue.js"></script>
<script>
    //定義一個組件 buttonCounter
    // 可以把常用的組件定義在js檔案中（export），如果某個頁面需要使用，直接import引入即可
    const buttonCounter = {
        template: `<button v-on:click="click()">點擊次數={{count}}次[區域組件化方式]</button>`,
        data() {
            return {count: 0}
        },
        methods: {
            click() {
                this.count++;
            }
        }
    }

    //創建vue實體，必須有
    let vm = new Vue({
        el: "#app",
        components: {//引入某個組件，此時該組件就是一個區域組件，該組件的使用范圍只在當前的vue實體中
            "my_counter":buttonCounter
        }
    })
    
    // 如果新創建了一個vue實體，掛載到一個div中（id="app2"）,在該div中如果要使用區域組件
    // 也必須在該vue實體中引入該組件，否則div（（id="app2"）無法使用該區域組件
</script>
</body>
</html>

10.2.4全域組件VS區域組件

全域組件是屬于所有的vue實體的，因此可以在任何一個vue實體中使用，

例如當前頁面中有一個vue實體，如果我們再宣告幾個vue實體，該全域組件都可以在這些vue實體中使用
區域組件的使用范圍只在當前的vue實體中，

例如：如果新創建了一個vue實體，掛載到一個新的div中（如：id="app2"），在div中如果要使用區域組件，也必須在新的vue實體中引入該組件，否則該div中無法使用該區域組件
組件定義需要放在new Vue()前，否則組件引入/注冊會失效

10.3組件化小結

組件也是一個Vue實體，它的定義也包括：data，methods，生命周期函式等
data在組件中是一個函式，不再是一個物件，這樣每次參考組件都是獨立的物件
組件渲染需要html模板，所以增加了template屬性，屬性的值就是HTML模板

11.生命周期和鉤子函式

官網：https://v2.cn.vuejs.org/v2/guide/instance.html

11.1基本說明

Vue實體有一個完整的生命周期，也就是說從開始創建、初始化資料、編譯模板、掛載DOM、渲染-更新-渲染、卸載等一系列程序，我們稱之為Vue實體的生命周期
鉤子函式（監聽函式/生命周期函式）：Vue實體在完整的生命周期程序中（比如設定資料監聽，編譯模板，將實體掛載到DOM，在資料變化時更新DOM等），會自動觸發鉤子函式
鉤子函式的作用：在某個階段，給程式員一個做某些處理的機會

11.2Vue實體的生命周期

new Vue()

創建了一個Vue的實體物件，此時就會進入組件的創建程序
Init Events & Lifecycle

初始化組件的事件和生命周期函式
beforeCreate

組件創建之后遇到的第一個生命周期函式，這個階段data和methods以及dom結構都未被初始化，也就是獲取不到data的值，不能呼叫methods中的方法
Init injections & reactivity

這個階段中，正在初始化data和methods中的方法
created

這個階段組件的data和methods中的方法已經初始化結束，可以訪問，但是dom結構未初始化，頁面未渲染

此階段適合發起ajax請求，因為模板的資料未渲染
編譯模板結構（在記憶體中）
beforeMount

當模板在記憶體中編譯完成，此時記憶體中的模板結構還未渲染至頁面上，看不到真實的資料
Create vm.$el and replace 'el' with it

在把記憶體中渲染好的模板結構替換至真實的dom結構，也就是頁面上
mounted

此時頁面渲染好，用戶看到的是真實的頁面資料，生命周期創建階段完畢，進入到了運行中的階段
生命周期運行中

1）beforeUpdate：當執行此函式，資料池的資料是新的，但頁面是舊的

2）Virtual DOM re-render and patch：根據最新的data資料，重新渲染記憶體中的模板結構，并把渲染好的模板結構替換至頁面

3）updated：頁面已經完成了更新，此時data資料和頁面的資料都是新的
beforeDestroy

當執行此函式時，組件即將被銷毀，但是還沒有真正開始銷毀，此時組件的data，methods方法還可以被呼叫
Teardown

注銷組件和事件監聽
destroyed

組件已經完成了銷毀

11.3應用實體

需求：展示Vue實體的生命周期和鉤子函式執行時機

重點研究幾個重要的鉤子函式（監聽函式/生命周期函式）：beforeCreate，created，beforeMount，mounted，beforeUpdate，updated
在這幾個鉤子函式中，資料模型是否加載/使用？自定義方法是否加載/可用？html模板是否加載/使用？html模板是否完成渲染？

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/541622.html

標籤：其他

上一篇：頁面重排和重繪問題

下一篇：菜雞的bug-前端開發的get請求攜帶物件引數的問題

day06-Vue03