每个组件都会有一个生命周期，创建之前的生命周期只能执行一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/lib/vue.js"></script>
</head>
<body>
<div id="box">
</div>
<script>
new Vue({
el:"#box",
data:{
myname:"xby"
},
// 创建阶段-----一生只会执行一次
beforeCreate(){
console.log("beforeCreate",this.myname)
},
created(){
console.log("created","初始化状态或者挂载到当前实例的一些属性")
this.myname = this.myname+"11111" //被截拦的状态
this.user = localStorage.getItem("user") //this下面的属性
},
// 获取节点
beforeMount(){
console.log("beforeMount",this.$el) //模板解析之前最后一次修改模板节点
},
mounted(){
console.log("mounted","拿到真实的dom节点",document.getElementById("box").innerHTML)
//依赖于dom创建之后，才能进行初始化工作的插件 （轮播插件）
//订阅 bus.$on
//发ajax
},
// -------------------------------------------------------------------------------------------------
// 更新阶段---代码修改多少次就会执行多少次
beforeUpdate(){
console.log("beforUpdate","更新之前，记录老的dom某些状态，比如滚动条")
},
updated(){
console.log("updated","更新完成，获取更新后的dom，才进行swiper工作的插件")
},
// -----------------------------------------------------------------------------------------------------
// 销毁阶段---一般是用在子组件
// 两者用法一致
beforeDestroy(){
console.log("销毁之前","清除定时器，事件解绑，，，，")
},
destroyed(){
console.log("销毁之后","清除定时器，实践解绑，，，")
}
})
</script>
</body>
</html>