Vue学习--生命周期

学好Vue，必须学好生命周期。
图示：
说明如下：
<body>
    <div id="app">
        <my-component></my-component>
    </div>
    <template id="component">
        <div>
            <h1 id="title">{{message}}</h1>
            <h3>Number: {{num}}</h3>
            <p><button @click="destroy">destroy</button></p>
            <input type="text" v-model="message">
        </div>
    </template>
    <script src="./base/vue.js"></script>
    <script>
        // 组件从创建初始到销毁的过程中，经常会需要在某些时刻去执行一些逻辑代码
        // Vue在每个组件的生命周期过程（从创建到销毁）中暴露出很多的 钩子函数，这些钩子函数都会在特定的时刻执行

        // 1. 组件或者实例会在这个生命周期过程中会经历哪些阶段？这些阶段中组件或者实例都做了些什么？

        // 2. 生命周期钩子函数有哪些？分别在哪些时刻执行?有什么作用？

        // 组件或者实例生命周期会经历三个阶段： 初始化/运行中/销毁

        // 1. 当组件或者Vue被实例化的时候，代表组件或者Vue的生命周期开始

        // 2. 初始化事件监听和生命周期
        Vue.component('my-component', {
            template: '#component',
            data() {
                return {
                    message: 'Hello World',
                    num: 1
                }
            },
            methods: {
                destroy() {
                    this.$destroy()
                }
            },
            beforeCreate() {
                // 3. 执行beforeCreate, 此时数据还未挂载, dom也没有渲染， 基本没有什么作用
                console.log('beforeCreate', this.message, document.querySelector('#title'))
            },
            // 4. 挂载数据，绑定数据监听等...
            created() {
                // 5. 执行created, dom没有渲染，可以操作数据,并且不会触发运行中阶段的钩子函数，经常会在这里做数据的初始化挂载
                console.log('created', this.message, document.querySelector('#title'))
                this.message += '!'
            },
            // 6. 查找组件或者实例的模板，进行编译，编译成虚拟dom结构放入到render函数中
            beforeMount() {
                // 执行beforeMount 也可以访问数据，操作数据，dom还没有渲染，作用和created一样，做初始数据的获取与挂载
                console.log('beforeMount', this.message, document.querySelector('#title'))
                this.message += '!'
            },
            // 7. 创建$el，并且执行了render函数
            // render () {
            //     console.log('render')
            // },
            mounted() {
                // 8. 执行mounted dom重新渲染完成，标志 初始化阶段完成
                console.log('mounted', this.message, document.querySelector('#title'))
                document.querySelector('#title').style.color = "red"
                document.querySelector('#title').onclick = function () {
                    console.log('hahahahha')
                }
                // this.message += '!' // 会触发update函数执行

                this.timer = setInterval(() => {
                    console.log('go')
                    this.num++
                }, 500)
            },
            // 9. 进入运行中阶段，当数据更改的时候
            beforeUpdate() {
                // 10. 执行beforeUpdate, 数据已经更新了，dom还没有重新渲染， 没有什么用，不能操作数据（死循环），dom也没有操作的必要
                console.log('beforeUpdate', this.message, document.querySelector('#title').innerHTML)
                // this.message += '!'
            },
            // 11. setter => watcher -> 创建新的虚拟dom -> diff对比 -> rerender
            updated() {
                // 12.执行updated dom重新渲染完成, 作用，可以操作重新渲染之后的dom
                console.log('updated', this.message, document.querySelector('#title').innerHTML)
            },
            // 13当组件被销毁的时候,销毁组件只有一个途径：调用组件的$destory方法，切换组件其实也在销毁组件
            beforeDestroy() {
                // 14. 执行beforeDestroy， 此时还没有销毁，搽屁股，善后.....取消一些事件监听，解绑某些dom的事件
                console.log('beforeDestroy', this.message, document.querySelector('#title'))
                clearInterval(this.timer)
                document.querySelector('#title').onclick = null
            },
            // 15. 取消所有的监听！数据监听/事件监听。。。。
            destroyed() {
                // 16. 执行destroyed 作用和beforeDestroy一样
                console.log('destroyed', this.message, document.querySelector('#title'))
            }
        })
        new Vue().$mount('#app')
    </script>
Vue学习--生命周期

猜你喜欢
