Vue生命周期代码示例

一，页面准备

1，创建页面

<div id="app">
    <input type="button" value="修改msg" @click="msg='No'">
    <h3 id="h3">{{msg}}</h3>
</div>

2，创建Vue实例对象

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'ok'
        },
        methods: {
            show(){
                console.log('show')
            }
        }
    })
</script>

二，创建阶段的生命周期函数

1，beforeCreate

表示实例完全被创建出来之前会执行它

在beforeCreate生命周期函数执行的时候 data和methods中的方法都未被初始化

beforeCreate(){
            console.log(this.msg)
            this.show()
        }

运行结果：

 2，created

在created中data和methods都已经被初始化好了

如果要调用methods中的方法 或者操作data中的数据 最早只能在created中操作

created(){
            console.log(this.msg)
            this.show()
        }

运行结果：

 3，beforeMount

把div中的内容编译模板 模板还在内存中 还未放到页面中去
在beforeMount执行的时候 页面上的元素还没有被真正替换过来 只是之前写的一些模板字符串

beforeMount(){
            console.log(document.getElementById('h3').innerText);
        }

运行结果：

4，mounted

表示内存中模板已经真实的挂载到页面中 用户已经可以看到渲染好的页面了

注意：mounted是实例创建期间最后一个生命周期函数

当执行完mounted就表示实例已经被完全创建好了 此时 如果没有其他操作的话 这个实例就在内存中

mounted(){
            console.log(document.getElementById('h3').innerText);
        }

运行结果：

三，运行中的生命周期函数

1，beforeUpdate

beforeUpdate(){
            console.log('界面上元素的内容' + document.getElementById('h3').innerText);
            console.log('data中的msg数据是' + this.msg)
        }

点击修改按钮，这时候 表示我们的界面还没有被更新，数据此刻已经更新了

得出结论：当执行beforeudate 页面上的数据是旧的 数据是最新的 页面尚未和最新的数据保持同步

2，updated

updated事件执行的时候 页面和data数据已经保持同步了 都是最新的

updated(){
            console.log('界面上元素的内容' + document.getElementById('h3').innerText);
            console.log('data中的msg数据是' + this.msg)
        }

运行结果：点击修改按钮

四，代码结构

生命周期函数和methods data同级