Vue学习:生命周期函数

生命周期函数

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>