Vue的生命周期

<div id="app">
        <input type="button" value="显示效果" @click="msg='no'">
        <h1 id="h1">{{msg}}</h1>
    </div>
<script src="./lib/vue-2.4.0.js"></script>
<script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'ok',
            },
            methods:{
                show(){
                    console.log('执行了show方法');
                }
            },
            beforeCreate() {
                //第一个生命周期函数，表示实例被完全创建出来之前执行它
                this.show();
                //注意：在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有初始化,在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
            },
            created() {
                //第二个生命周期函数
                console.log(this.msg);
                this.show();
                // 在created中，data和methods都已经被初始化好了
                // 如果调用methods中的方法，或者操作data中的数据库，最早最早也只能在created中操作！在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。
            },
            beforeMount(){
                // 第三个生命周期函数，表示模板已经在内存中编译完成，但是尚未把模板渲染到页面中去
                console.log(document.getElementById('h1').innerText)
                // 在beforeMount执行的时候，页面中的元素还没有被真正的替换过来，只是之前写的一些模板字符串,在挂载开始之前被调用：相关的 render 函数首次被调用。
            },
            mounted() {
                //第四个生命周期函数，表示内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
                console.log(document.getElementById('h1').innerText);
                // 注意：mounted是实例创建期间的最后一个生命周期函数，当执行完mounted,就表示实例已经被完全创建好了，
                // 此时如果没有其他操作的话，这个实例就会渲染到页面,
                // 注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick：
                // 该钩子在服务器端渲染期间不被调用。
            },  
            // 接下来是运行中的两个事件
            beforeUpdate() {
                //第五个生命周期函数，注意：这个事件会根据data数据的改变，有选择性的触发0次或多次
                //这时候表示：我们的界面还没有被更新(数据已经被更新了)
                console.log('界面上元素内容：' + document.getElementById('h1').innerText);
                console.log('data中的msg数据是：' + this.msg);
                //当执行beforeUpdate的时候，页面中的显示的数据还是旧的，此时data数据是最新的,页面和最新的数据尚未保持同步
                //该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。
            },
            updated(){
                //第六个生命周期函数，注意：这个事件会根据data数据的改变，有选择性的触发0次或多次
                console.log('界面上元素内容：' + document.getElementById('h1').innerText);
                console.log('data中的msg数据是：' + this.msg);
                //updated事件执行的时候，页面和data数据已经保持同步了，都是最新的
                //注意 updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick：
            },
            beforeDestroy() {
                //第七个生命周期函数，
                //当执行beforeDestroy勾子函数的时候，Vue实例已经从运行阶段进入到销毁阶段
                //当执行beforeDestroy勾子函数的时候，实例身上所有的data和所有的methods，以及过滤器.指令。。。
                //都处于可用状态，此时，还没有真正的执行销毁过程
            },
            destroyed() {
                //第八个生命周期函数，
                //当执行到destroyed函数的时候，组件已经被完全销毁了，此时，组件中所有的数据.方法.指令.过滤器。。。
                //都已经不可用了
            },
            activated() {
            	//被 keep-alive 缓存的组件激活时调用。
            	//该钩子在服务器端渲染期间不被调用。
            }，
            deactivated() {
            //被 keep-alive 缓存的组件停用时调用。
            //该钩子在服务器端渲染期间不被调用。
            }，
        });
        
    </script>