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