Vue3的學習---6

一生万物万物归一發表於2024-08-16
Vue

6.Vue生命週期

6.1 生命週期

6.1.1 生命週期圖示

img

從圖中可以看出，一個元件從被建立到最後被銷燬，總共要經歷8個過程：

  1. beforeCreate：例項建立前
  2. created：例項建立完畢
  3. beforeMount：DOM掛載前
  4. mounted：DOM掛載完畢
  5. beforeUpdate：資料更新前
  6. unpdated：資料更新完畢
  7. beforeUnmount：解除DOM掛載前
  8. unmounted：解除DOM掛載完畢

6.1.2 程式碼演示

<body>
    <div id="app">
        <mycomponent v-if="isShow"></mycomponent>
        <button @click="change">{{ msg }}</button>
    </div>

    <script src="../js/vue3.js"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    isShow: true,
                    msg: '隱藏'
                }
            },
            methods: {
                change() {
                    this.isShow = !this.isShow
                    this.msg = this.isShow ? '隱藏' : '顯示'
                }
            }
        })

        app.component('mycomponent', {
            template: `<div>
                        {{ num }} <button @click="add">加</button>
                    </div>`,
            data() {
                return {
                    num: 0
                }
            },
            methods: {
                add() {
                    this.num++
                }
            },
            beforeCreate() {
                console.log('beforeCreate - Vue例項建立前的生命週期函式')
            },
            created() {
                console.log('created - Vue例項建立後的生命週期函式')
            },
            beforeMount() {
                console.log('beforeMount - Vue例項掛載DOM前的生命週期函式')
            },
            mounted() {
                console.log('mounted - Vue例項掛載DOM後的生命週期函式')
            },
            beforeUpdate() {
                console.log('beforeUpdate - 資料更新前的生命週期函式')
            },
            updated() {
                console.log('updated - 資料更新後的生命週期函式')
            },
            beforeUnmount() {
                console.log('beforeUnmount - Vue例項解除安裝前的生命週期函式')
            },
            unmounted() {
                console.log('unmounted - Vue例項解除安裝後的生命週期函式')
            }
        })

        app.mount('#app')
    </script>
</body>

6.2 在Vue中操作DOM

<body>
    <div id="app">
        <mycomponent v-if="isShow"></mycomponent>
        <button @click="change">{{ msg }}</button>
    </div>

    <script src="../js/vue3.js"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    isShow: true,
                    msg: '隱藏'
                }
            },
            methods: {
                change() {
                    this.isShow = !this.isShow
                    this.msg = this.isShow ? '隱藏' : '顯示'
                }
            }
        })

        app.component('mycomponent', {
            template: `<div>
                        {{ num }} <button @click="add" ref="btn">加</button>
                    </div>`,
                    // ref="btn" 引用，用於獲取按鈕元素
            data() {
                return {
                    num: 0
                }
            },
            methods: {
                add() {
                    this.num++
                }
            },
            beforeCreate() {
                console.log('beforeCreate - Vue例項建立前的生命週期函式')
            },
            created() {
                console.log('created - Vue例項建立後的生命週期函式')
            },
            beforeMount() {
                console.log('beforeMount - Vue例項掛載DOM前的生命週期函式')
            },
            mounted() {
                let domObj = this.$refs.btn
                // console.log(domObj)
                domObj.style.color = 'skyblue'
                console.log('mounted - Vue例項掛載DOM後的生命週期函式')
            },
            beforeUpdate() {
                console.log('beforeUpdate - 資料更新前的生命週期函式')
            },
            updated() {
                console.log('updated - 資料更新後的生命週期函式')
            },
            beforeUnmount() {
                console.log('beforeUnmount - Vue例項解除安裝前的生命週期函式')
            },
            unmounted() {
                console.log('unmounted - Vue例項解除安裝後的生命週期函式')
            }
        })

        app.mount('#app')
    </script>
</body>

相關文章