Vue的生命周期

生命周期

概念：

Vue中的生命周期指的是 组件 从创建到销毁一个过程，在这个过程中，我们在每一个特定的阶段会触发一些方法（ 这些方法具备一些功能），我们给这些方法起了个名字叫做（ 生命周期钩子函数/ 组件钩子 ）

用途：

因为我们想在生命周期钩子中实现项目功能，那么我们必须知道每一个钩子函数的具体用途

Vue的生命周期分为三个阶段，分别为： 初始化，运行中， 销毁，一共8个钩子函数
注意： 生命周期钩子函数不允许写成箭头函数+配置项写在生命周期钩子函数的上

初始化阶段：

beforeCreate

1. 组件创建前触发，目的是为了组件的生命周期 和 组件中的事件做准备
2. 数据没有获得，真实dom也没有渲染出来
3. 可以进行数据请求，提供了一次数据修改的机会
4. 执行一次

<div id="app">
    <Hello></Hello>
</div>
    
<template id="hello">
    <div>
        <p> {{ msg }} </p>
    </div>
</template>

Vue.component('Hello',{
        template: '#hello',
        data () {
            return {
                msg: 'hello world'
            }
        },
        beforeCreate () {//不允许是箭头函数
            console.log( '1-beforeCreate' )
            console.log( 'data',this.msg )
            console.log( '真实dom',document.querySelector('p'))

            fetch('./data.json')
            .then( res => res.json())
            .then( data => console.log( data ))
            .catch( error => console.log( error ))
        }
    })

    new Vue({
        el: '#app'
    })

created

1. 组件创建结束
2. 数据得到了，真实dom没有渲染出来
3. 可以进行数据请求，提供了一次数据修改的机会
4. 执行了一次

Vue.component('Hello',{
        template: '#hello',
        data () {
            return {
                msg: 'hello world'
            }
        },
        created () {
            console.log( '2-created' )
            console.log( 'data',this.msg )
            console.log( '真实dom',document.querySelector( 'p' ))

            fetch('./data.json')
            .then( res => res.json())
            .then( data => console.log( data ))
            .catch( error => console.log( error ) )
        }
    })
    new Vue({
        el: '#app'
    })

beforeMount

1. 组件挂载前
2. 任务： 判断el 判断 template
   -如果el没有，那么我们需要手动挂载，如果有，那么判断template
   -如果template有，那么进行render函数，render函数作用是将jsx转换成vdom对象模型
   -如果template没有，那么通过 outerHTML 手动书写模板

<div class="box"></div>

var box = document.querySelector('.box')
  // box.innerHTML = 'Hello'
  box.outerHTML = 'Hello'

3. 数据可以获得，但是真实dom还没有渲染
4. 可以进行数据请求，也提供了一次数据修改的机会
5. 执行一次

Vue.component('Hello',{
        template: '#hello',
        data () {
            return {
                msg: 'hello world'
            }
        },
        beforeMount () {
            console.log( '3-beforeMount' )
            console.log( 'data',this.msg )
            console.log( '真实dom',document.querySelector( 'p' ))

            fetch('./data.json')
            .then( res => res.json())
            .then( data => console.log( data ))
            .catch( error => console.log( error ) )
        }
    })
    new Vue({
        el: '#app'
    })

mounted

1. 组件挂载结束
2. 数据获得了，真实dom也获得了
3. 可以进行数据请求，也就可以修改数据
4. 执行了一次
5. 可以进行真实dom的操作了（ 可以进行第三方库的实例化了 ）

Vue.component('Hello',{
        template: '#hello',
        data () {
            return {
                msg: 'hello world'
            }
        },
        mounted () {
            console.log( '4-mounted' )
            console.log( 'data',this.msg )
            console.log( '真实dom',document.querySelector( 'p' ))

            fetch('./data.json')
            .then( res => res.json())
            .then( data => console.log( data ))
            .catch( error => console.log( error ))
        }
    })
    new Vue({
        el: '#app'
    })
    //1. 数据请求一般写在created里面
    //2. 第三方库实例化我们一般会往mounted中写

运行中阶段：

触发条件：数据更新

beforeUpdate

1. 更新前
2. 重新渲染 VDOM , 然后通过diff算法比较两次vdom,生成patch 补丁对象
3. 这个钩子函数更多的是内部进行一些操作，我们就不在多干预了
4. 可以触发多次

<div id="app">
    <Hello></Hello>
</div>
    
<template id="hello">
    <div>
        <p> {{ msg }} </p>
    </div>
</template>

Vue.component('Hello',{
        template: '#hello',
        data () {
            return {
                msg: 'hello world'
            }
        },
        created () {
            console.log( '2-created' )
            console.log( 'data',this.msg )
            console.log( '真实dom',document.querySelector( 'p' ))

            fetch('./data.json')
            .then( res => res.json())
            .then( data => console.log( data ))
            .catch( error => console.log( error ) )
        }
    })
    new Vue({
        el: '#app'
    })
    //数据更新触发

updated

1. 更新结束
2. 真实dom得到了，数据也得到了（ 更新后的 ）
3. 动态数据获取（ 第三方库实例化 ）

Vue.component('Hello',{
        template: '#hello',
        data () {
            return {
                msg: 'hello world'
            }
        },
        updated () {
            console.log( '6-updated' )
            console.log( 'data',this.msg )
            console.log( '真实dom',document.querySelector('p'))

            fetch('./data.json')
            .then( res => res.json())
            .then( data => console.log( data ))
            .catch( error => console.log( error ))
        }
    })
    new Vue({
        el: '#app'
    })

销毁阶段：

触发条件： 当组件销毁时

Vue的销毁有两种形式

1. 通过开关的形式 - 外部销毁
2. 通过调用 $destroy 方法 - 内部销毁

beforeDestroy和destroyed

这两个钩子功能一致的，这两个钩子没有太大的区别
作用：
用来做善后的,比如计时器的关闭 第三方实例的删除

<div id="app">
        <Hello v-if = "flag"></Hello>
        <button @click = "flag = !flag"> 切换 </button>
    </div>

    <template id="hello">
        <div>
            hello
        </div>
    </template>

Vue.component('Hello',{
        template: '#hello',
        mounted() {
            this.time = setInterval(() => {
                console.log( 123 )
            },1000)
        },
        beforeDestroy () {
            console.log( 'beforeDestroy')
            clearInterval( this.time )
        },
        destroyed () {
            console.log( 'destroyed')//关闭计时器
        }
    })

    new Vue({
        el: '#app',
        data: {
            flag: true
        }
    })

外部销毁:通过开关的形式(html外壳结构不能销毁，组件可以销毁)

<div id="app">
        <Hello v-if = "flag"></Hello>
        <button @click = "flag = !flag"> 切换 </button>
    </div>

    <template id="hello">
        <div>
            hello
        </div>
    </template>

Vue.component('Hello',{
        template: '#hello',
        beforeDestroy () {
            console.log( 'beforeDestroy')           
        },
        destroyed () {
            console.log( 'destroyed')
        }
    })

    new Vue({
        el: '#app',
        data: {
            flag: true
        }
    })

内部销毁:通过调用$destroy方法（html和组件都被销毁）

<div id="app">
        <Hello></Hello>
    </div>

    <template id="hello">
        <div class="hello-box">
            hello
            <button @click = "clear"> 销毁 </button>
        </div>
    </template>

Vue.component('Hello',{
        template: '#hello',
        methods: {//配置项写在钩子函数上面
            clear () {
                this.$destroy()
            }
        },
        beforeDestroy () {
            console.log( 'beforeDestroy')  
            document.querySelector( '.hello-box' ).remove()         
        },
        destroyed () {
            console.log( 'destroyed')//关闭计时器
        }
    })

    new Vue({
        el: '#app'
    })

最后给大家放一张官网的图参考参考啦 >_0