关于Vue的生命周期

 组件从创建初始到注销的过程中，经常会需要在某些时刻去执行一些逻辑代码，vue每个组件的生命周期中会暴露出很多生命钩子 这些钩子函数会在特定的时刻执行，组件或实例生命周期会经历三个阶段 初始化/运行中/销毁

body部分的代码

<div id="app">
        <h1>{{message}}</h1>
        <app-com></app-com>
    </div>
    <template id="app-com">
        <div>
            <h1 id="title">{{title}}---{{num}}</h1>
            <button @click='destroy'>destroyed</button>
            <input type="text" v-model='title'>
        </div>
        
    </template>

js

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

            this.time = setInterval(()=>{
                this.num++
            },1000)
        },
        // 10. 当数据改变时 进入运行中
        // 11. 执行beforeUpdate, 数据已经更新了，dom还没有重新渲染，得到的dom是之前的dom 没有什么用，不能操作数据（死循环），dom也没有操作的必要
        beforeUpdate(){
            console.log('beforeUpdate',document.querySelector('#title').innerHTML)
        },
         // 12. setter => watcher -> 创建新的虚拟dom -> diff对比 -> rerender
        updated () {
            // 13. 执行updated dom重新渲染完成, 作用，可以操作重新渲染之后的dom 不能操作数据（死循环）
            console.log('updated', document.querySelector('#title'))
        },
        // 14. 调用vm.$destroy()的时候执行
        // 15. 执行beforeDestroy， 此时还没有销毁，善后.....取消一些事件监听，解绑某些dom的事件
        beforeDestroy(){
            console.log('beforeDestroy', document.querySelector('#title'))
        },
        // 16. 取消所有的监听！数据监听/事件监听。。。。
        destroyed () {
            // 16. 执行destroyed 作用和beforeDestroy一样
            this.time = null
            console.log('destroyed',this.num, document.querySelector('#title'))
        }
    })
   
    new Vue({
        el:'#app',
        data:{
            message:'vue 的生命周期'
        },
        
    })

最后在总结一下：一共有8个钩子函数

beforeCreate 没什么用 数据没有挂载 dom也未渲染

created 和 beforeMount 相似 数据已经挂载 但dom还未渲染 通常用来做数据的初始化 并且不会影响生命周期中其它钩子函数的执行

mounted  可以操作数据 dom已经渲染完成 会触发update函数执行 标志着初始阶段的完成、

beforeUpdate 数据改动后触发的函数 所以不能修改数据 会造成死循环 dom也未更新渲染 所以也没什么用

update dom渲染完成 通常用来操作数据更改后的dom 也不能操作数据

beforeDestroy vm.$destroy()的时候执行 实例被销毁之前触发的函数 取消一些事件监听，解绑某些dom的事件

destroy  实例已经被销毁 取消所有的监听！数据监听/事件监听。。。。

 

=> react的生命周期