Vue的生命周期

最新推荐文章于 2022-04-11 14:48:31 发布

原创最新推荐文章于 2022-04-11 14:48:31 发布 · 923 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Vue的生命周期 #生命周期 #钩子函数 #组件的生命周期 #组件的钩子函数

生命周期

概念：

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

用途：

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

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

初始化阶段：

beforeCreate

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

<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

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

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

组件挂载前
任务：判断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'

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

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

组件挂载结束
数据获得了，真实dom也获得了
可以进行数据请求，也就可以修改数据
执行了一次
可以进行真实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

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

<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

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

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的销毁有两种形式

通过开关的形式 - 外部销毁
通过调用 $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'
    })