Vue：生命周期（钩子函数）

生命周期介绍

1：理解生命周期

简单的说，所谓生命周期就是从生到死的过程，也就是vue实例的创建到销毁的过程。

 

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

                               

 （这里的红边圆角矩形内的都是对应的Vue实例的钩子函数）

生命周期的钩子函数

        

一、常用的钩子函数

创建、渲染DOM、更新、销毁、激活

beforeCreate(){

    // 组件创建之前

    console.log(this.msg);

},

created(){

    // 组件创建之后，这个步骤是把data数据创建出来了

    // 使用该组件，就会触发以上的钩子函数，created中可以操作数据，发送ajax，并且可以实现vue==》页面的影响  （数据驱动视图）应用：发送ajax请求

    console.log(this.msg);

    // this.msg = '嘿嘿黑';

},



beforeMount(){

    // 装载数据到DOM之前会调用

    console.log(document.getElementById('app'));

},

mounted(){

    // 这个地方可以操作DOM

    // 装载数据到DOM之后会调用 可以获取到真实存在的DOM元素，vue操作以后的DOM

    console.log(document.getElementById('app'));

},



beforeUpdate(){

    // 在更新之前，调用此钩子，应用：获取原始的DOM

    console.log(document.getElementById('app').innerHTML);

},

updated(){

    // 在更新之后，调用此钩子，应用：获取最新的DOM

    console.log(document.getElementById('app').innerHTML);

},



beforeDestroy(){

    console.log('beforeDestroy');

},

destroyed(){

    console.log('destroyed');

},



activated(){

    console.log('组件被激活了');

},

deactivated(){

    console.log('组件被停用了');

}

 

二、钩子函数的使用

 

<body>

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

<script src="../vue.js"></script>

<script>
---------------------------------------------------------------------------

    let Test = {
        data() {
            return {
                msg: 'alex',
                count: 0,
                timer: null
            }
        },
        template: `
            <div>
                <div id="box">{{ msg }}</div>
                <div>{{ count }}</div>
                <button @click = 'change'>修改DOM</button>
            </div>

        `,
        methods: {
            change() {
                this.msg = 'wusir';
                document.querySelector('#box').style.color = 'red';//querySelector:查询选择器
            },
        },
        beforeCreate() {
            //组件创建之前
            console.log('组件创建之前', this.msg)
        },
　　　　
        created() {
            //组件创建之后
            // 使用该组件，就会触发以上的钩子函数，created中可以操作数据，发送ajax获取数据，并且可以实现vue==》页面的影响  应用：发送ajax请求
            console.log('组件创建之后', this.msg);
            this.timer = setInterval(() => {//定时器没有销毁的机制
                this.count++
            }, 1000)
        },
        beforeMount() {
            //组件挂载之前，也就是还没有渲染template里的内容
            // 所以在这里我们可以写js的DOM操作（vue只是js的库，所以在这里可以操作jQuery）
            console.log(document.getElementById('app'))
        },
        mounted() {
            //这里也可以操作DOM，这里能够真实的获取DOM（其实在获取这是DOM前有一个虚拟DOM（使用diff算法））
            console.log(document.getElementById('app'))
        },

        beforeUpdate() {
            // 在更新之前，调用此钩子，应用：获取原始的DOM

        },
        updated() {

            // 在更新之后，调用此钩子，应用：获取最新的DOM
        },
        beforeDestroy() {//如组件的销毁，可以用v-if或v-show

            console.log('beforeDestroy');

        },

        destroyed() {
            //注意：定时器是不会自动销毁的，所以一般在这里销毁
            console.log('destroyed');
            clearInterval(this.timer);
        },

        activated() {
            //激活和停用需要需要借助一个内置组件才行，否则不运行;keep-alive:缓存相应组件(内置组件)，不让组件死掉
　　　　　　该钩子在服务器端渲染期间不被调用。
            console.log('组件被激活了');

        },

        deactivated() {

            console.log('组件被停用了');

        }
    };
--------------------------------------------------------------------------------------------------
    let App = {
        data() {
            return {
                isShow: true
            }
        },
        template: `
            <div>
                <keep-alive><Test v-if="isShow"></Test></keep-alive>

                <button @click = 'clickHandler'>改变test组件的生死</button>
            </div>

        `,
        methods: {
            clickHandler() {
                this.isShow = !this.isShow
            },
        },
        components: {
            Test
        },

    };


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


</script>

</body>

 效果：

        

 

 

从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了。

 

 官方文档：生命周期

 

posted @ 2018-11-29 09:43  葡萄想柠檬  Views(1854)  Comments(0)    收藏  举报
目录代码