03_03.组件生命周期函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <main id="app">
        <app-header></app-header>
    </main>

    <script src="vue.js"></script>
    <script>
        Vue.component('app-header', {
            template: `<header @click="changeTit">{{ tit }}</header>`,
            data: function() {
                return {
                    tit: '标题'
                };
            },
            methods: {
                changeTit: function() {
                    this.tit = '注释';
                }
            },
            // 我们可以在这个函数里面加一些log, 或者提示信息类的东西
            // 因为该函数执行, vue仅仅是刚刚初始化了这个组件, 还没有对数据进行监听, 
            // 所以组件实例this是不能使用数据的.
            beforeCreate: function() {
                console.log('beforeCreate');
                console.log('header组件刚刚实例化完毕');
                console.log(this);
                console.log(this.tit);
            },

            // !!重点!!
            // 该函数会在数据监听完毕后执行, 在这里我们可以使用数据了
            // 我们一般会在这里发送ajax请求, 把请求回来的数据赋值给data里面的属性
            created: function() {
                console.log('created');
                console.log('数据可以使用了');
                console.log(this.tit);
            },

            // 在模版编译完毕后执行, 但是视图还没有进行渲染
            beforeMount: function() {
                console.log('beforeMount');
                console.log(this.$el);
            },

            // !!重点!!
            // 编译好的模版插入到了视图, 这里$el可以使用了
            // 如果我们要进行特殊的DOM操作, 那么这类代码写到这里
            mounted: function() {
                console.log('mounted');
                console.log(this.$el); // $开头的都是vue提供的内部属性与方法, $el就是渲染到页面中的元素
            },

            // !!重点!!
            // 当数据改变的时候执行, 这时候视图还没有更新
            // 在这里我们可以根据数据的变化, 看看要不要有其他特殊逻辑处理
            beforeUpdate: function() {
                console.log('beforeUpdate');
                console.log(this.tit);            // 数据变了
                console.log(this.$el.innerHTML);  // 视图还未改变
            },

            // 数据变了, 视图也更新了的时候执行
            // 注意: 千万不要在这里进行数据的修改
            updated: function() {
                console.log('updated');
                console.log(this.tit);            // 数据变了
                console.log(this.$el.innerHTML);  // 视图也变了

                // 会死循环
                // this.tit += 'updated';  
            }
        });

        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
    </script>
</body>
</html>

推荐阅读更多精彩内容