Vue学习:生命周期函数

Merbng · 简书 · · 2019-05-17 21:14

正文

生命周期函数

beforeCreate()

表示实力完全被创建出来之前，
注意：在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没初始化

created()

在create中，data和methods都已经被初始化好了
如果要调用methods中的方法或者操作data中的数据，最早，只能在created中操作

beforeMount()

表示模板已经在内存中编辑完成了，但是尚未把模板渲染到页面上
在beforeMount执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串

mounted()

表示内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
注意：mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了，此时，如果没有其他操作的话，这个实例就一直在内存中

接下来就是运行中的两个事件

beforeUpdate()

表示我们的界面还没有被更新，
当执行beforeUpdate的时候，页面中显示的数据还是旧的，此时data的数据是最新的，页面尚未和最新的数据保持同步

updated()

页面和data数据已经保持同步了，都是最新的

<script>
    var vm = new Vue({
        el: '.app',
        data: {
            msg: '这是内容啊'
        },
        methods: {},
        beforeCreate(){
        
        },
        created(){
          
        },
        beforeMount(){
           
        },
        mounted(){
            
        },
    //    接下来就是运行中的两个事件
        beforeUpdate(){
           
        },
        updated(){
            
        }
    })
</script>