vue生命周期

程序的生命周期是模拟现实世界， 万事万物都有生命周期。
vue的生命周期是指程序从创建到消亡的过程中会自动调用的一个回调函数，在特定时候会执行特定的操作

    let vm = new Vue({
        el: '#app',
        // template:'<div>box</div>',
        data: {
          username:'cyan',
        },
        // beforeCreate 程序创建之前的生命周期 这时候桥梁函数才走了两步，程序还没初始化完全，拿不到数据和方法
        beforeCreate() {
          console.log('beforeCreate',this.username);
          setTimeout(()=>this.username='kk',1000)
        },
        // created 程序创建之后的生命周期 这时候程序初始化完成，可以拿到数据和方法，但是是假的html
        created() {
          console.log('created',this.username);
        },
        // beforeMount 挂载之前的生命周期，类似于created
        // 区别在于crated是程序刚创建完而beforemount是马上要挂载了就差临门一脚，模板编译完成，但是无法获取到真实的dom
        beforeMount() {
          console.log('beforemount');
        },
        // mounted 挂载之后的生命周期，此时渲染已经完成，可以操作真实dom
        mounted() {
          console.log('mounted');
        },
        // beforeUpdate 响应式数据更新时调用，发生在虚拟DOM打补丁之前，适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器
        beforeUpdate() {
          console.log('beforeUpdate')
        },
        // updated 虚拟DOM重新渲染和打补丁之后调用，组成新的DOM已经更新，避免在这个钩子函数中操作数据，防止死循环
        updated() {
          console.log('updated');
          setTimeout(()=>this.username='kk'+Math.random(),1000)
        },
        // beforeDestroy 实例销毁前调用，实例还可以用，this能获取到实例，常用于销毁定时器，解绑事件
        beforeDestroy() {
          console.log('beforeDestroy');
        },
        // destroyed 实例销毁后调用，调用后所有事件监听器会被移除，所有的子实例都会被销毁
        destroyed() {
          console.log('destoyed');
        }
      })