vue生命周期

<div id="app">{{a}}</div>

<script>
        //生命周期：
        //beforeCreate created 出生之前，出生之后
        //beforeMount mounted 挂载之前，挂载完成
        //beforeUpdate updated 更新之前，更新之后
        //beforeDestroy destroyed 死亡之前，死亡之后
        let self = null
        Vue.mixin({
            beforeCreate(){
                //初始化前的公共逻辑
            }
        })
        //生命周期是同步执行的
        let vm = new Vue({   //根实例，初始化时会调用很多方法（钩子函数，回调函数）
            el:'#app',       //要保证有编译的元素，挂载
            beforeCreate(){
                //1.初始化之前，没有进行数据观测，只是调用了初始化父子关系 及 内部事件
                //一般会混入公共逻辑 Vue.mixin
            },   
            created(){
                self = this
                //2.获取ajax，初始化操作
                //没有真实挂载元素，无法获取dom
            },      
            beforeMount(){
                //3.开始编译，没有什么实际意义
                //在第一次调用render之前执行
            },    
            render(){},
            template:'<div>{{a}}</div>', //如果有template属性会用模板替换掉外部html，只要有此属性app中的内容就没有任何意义了，只能有一个根元素，不能是文本节点
            mounted(){
                //4.挂载，真实dom渲染完了，可以操作dom了
            },        
            //vm.a=1没反应，vm.a=2会先弹'更新之前'，再弹'更新之后'，再改变页面数据
            //一般用watch来代替这两个功能
            beforeUpdate(){},    //5.更新之前，只要数据一变就会触发，没有什么实际意义
            updated(){},        //6.更新之后，不要再更新数据了，没有什么实际意义
            beforeDestroy(){    
                //7.销毁前，可以清除定时器或者清除事件绑定
                //$off 可以去取消dom的事件绑定
            },
            destroyed(){},        //8.销毁后，只是移除了监听没有移除函数，没有什么实际意义
            data(){return {a:1}}, //放数据
        
        });
        //vm.$mount('#app'); 4.挂载元素也可以这样写
        vm.$destroy();//方法执行beforeDestroy和destroyed就会起作用，只是移除了监听没有移除函数
    </script>