Vue 組件的生命周期

本文轉載自查看原文 2019-06-04 22:58 1604 Vue

組件的生命周期

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <!-- <App></App> -->
        </div>
        <script type="text/javascript" src="../js/vue.min.js"></script>
        <script type="text/javascript">
            /*
                生命周期的鈎子函數   函數
                beforeCreate
                created
                beforeMount
                mounted
                beforeUpdate
                updated
                activated
                deactivated
                beforeDestroy
                destroyed
            */
            var Test = {
                data: function() {
                    return {
                        msg: 'hello world'
                    }
                },
                template: `
                    <div>
                        <div>{{msg}}</div>
                        <button @click = 'changeHandler'>改變</button>
                    </div>
                `,
                methods: {
                    changeHandler() {
                        this.msg = this.msg + '哈哈哈';
                    }
                },
                beforeCreate: function() {
                    // 組件創建之前
                    console.log(this.msg);
                },
                created: function() {
                    // 組件創建之后

                    // 使用該組件，就會調用created方法 在created這個方法中可以操作后端的數據，數據響應視圖
                    // 應用： 發起ajax請求
                    console.log(this.msg);
                    this.msg = '改變了吧'
                },
                beforeMount: function() {
                    // 掛載數據到DOM之前會調用
                    console.log(document.getElementById('app'));
                },
                mounted: function() {
                    // 掛載數據到DOM之后會調用  Vue 作用以后的DOM
                    console.log(document.getElementById('app'));
                },
                beforeUpdate() {
                    // 在更新DOM之前 調用此鈎子函數 應用：可以獲取原始的DOM
                    console.log(document.getElementById('app').innerHTML);
                },
                updated() {
                    // 在更新DOM之后 調用此鈎子函數 應用：可以獲取最新的DOM
                    console.log(document.getElementById('app').innerHTML);
                },
                beforeDestroy() {
                    console.log('beforeDestroy');
                },
                destroyed() {
                    console.log('destroyed');
                },
                activated() {
                    console.log('組件被激活了');
                },
                deactivated() {
                    console.log('組件被停用了');
                }
            }

            var App = {
                data: function() {
                    return {
                        isShow: true
                    }
                },
                // Vue的內置組件，能在組件的切換過程中將狀態保留在內存中父，防止重復渲染DOM
                template: `
                    <div id='app'>
                        <keep-alive>
                            <Test v-if = 'isShow'></Test>
                        </keep-alive>
                        <button @click = 'isShow = !isShow'>改變生死</button>
                    </div>
                `,
                components: {
                    Test
                },
                methods: {

                }
            }
            new Vue({
                el: '#app',
                data: function() {
                    return {

                    }
                },
                template: `<App />`,
                components: {
                    App
                }
            });
        </script>
    </body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue組件的生命周期 vue的組件和生命周期 Vue生命周期，及父子組件生命周期順序 Vue父子組件生命周期 vue 父子組件的生命周期順序 vue嵌套組件的生命周期 Vue 組件生命周期鈎子 vue父子組件的生命周期順序 VUE（生命周期） vue生命周期