<script src="./base/vue.js"></script>
<body>
<div id="app">
<my-component></my-component>
</div>
<!--定义组件的模板-->
<template id="my-component">
<div>
<h1 id="title">我是h1 -- {{msg}}</h1>
<input type="text" v-model="msg">
<button @click="destroy">销毁组件</button>
</div>
</template>
<script>
/*
组件从创建到销毁的一系列过程叫做组件的声明周期。
vue在整个生命周期里面提供了一些函数，可以在内部实现一些业务逻辑，
并且这些函数会在一些特定的场合下去执行。（在生命周期的某一个时刻进行触发）
组件的生命周期大体可以分为三个阶段： 初始化、运行中、销毁
初始化阶段：beforeCreate created beforeMount （render） mounted
运行中阶段：beforeUpdate updated
销毁阶段： beforeDestroy destroyed
*/
//初始化阶段
//1.一个组件或者实例的生命周期都是从new开始的
//2.实例化之后，内部会做一些初始化的事件与生命周期相关的配置
Vue.component("my-component",{
template:"#my-component",
data(){
return {
msg:"hello"
}
},
methods:{
destroy(){
this.$destroy() //组件销毁方法
}
},
//3.beforeCreate这个钩子函数初始化的时候就会执行
//但是数据是获取不到的，并且真实dom元素也是没有渲染出来的
beforeCreate(){
console.log("beforeCreate...")
console.log(this.msg,document.getElementById("title"))
},
//4.created钩子函数内部可以访问到数据了，但是页面当中真实dom节点还是没有渲染出来
//在这个钩子函数里面，可以进行相关初始化事件的绑定、发送ajax操作
//当组件还没有挂载完毕之前，更改数据的话，是不会触发运行时钩子函数的执行！
created(){
console.log("created...")
this.timer = setInterval(()=>{
console.log("定时器开着哦...")
this.msg = this.msg+"!"
},2000)
// this.msg = 11111111111
console.log(this.msg,document.getElementById("title"))
},
//5.接下来的过程，就是组件或者实例去查找各自的模板结构，然后将其编译成虚拟dom
//6.beforeMount代表dom马上就要被渲染出来了，但是却还没有真正的渲染出来
//这个钩子函数与created钩子函数用法基本一致，可以进行相关初始化事件的绑定、发送ajax操作
beforeMount(){
console.log("beforeMount...")
console.log(this.msg,document.getElementById("title"))
},
//生成好虚拟dom，然后内部通过render函数将对应的el进行替换，做一个初始化的虚拟dom渲染真实dom过程
// render(){
// console.log("render....")
// }
//7.mounted钩子函数是挂载阶段的最后一个钩子函数
//数据挂载完毕，真实dom元素也已经渲染完成了
//这个钩子函数内部可以做一些实例化相关的操作 拖拽
mounted(){
console.log("mounted...")
console.log(this.msg,document.getElementById("title"))
},
//8.这个钩子函数初始化的不会执行
//当组件挂载完毕的时候，并且当数据改变的时候，才会立马执行
//这个钩子函数获取dom的内容是更新之前的内容
beforeUpdate(){
console.log("beforeUpdate...",this.msg ,document.getElementById("title").innerHTML)
},
//9.这个钩子函数获取dom的内容是更新之后的内容
//生成新的虚拟dom，新的虚拟dom与之前的虚拟dom进行比对，差异之后，就会进行真实dom渲染。
//在updated钩子函数里面就可以获取到因diff算法比较差异得出来的真实dom渲染了。
updated(){
console.log("updated....", this.msg,document.getElementById("title").innerHTML)
},
//10.当组件销毁的时候，就会触发
//这个钩子函数代表销毁之前，可以做一些善后操作
//可以清除一些初始化事件、定时器相关的东西。
beforeDestroy(){
console.log("beforeDestory....")
clearInterval(this.timer)
},
//11.组件销毁的时候执行
//watch/数据劫持等功能已经完全丧失
destroyed(){
console.log("destroyed...")
}
})
new Vue().$mount("#app");
</script>
</body>
如图
keep-alive
//当你通过keep-alive标签包裹动态组件的时候，那么动态组件就没有被销毁了，也就不会去执行beforeDestroy钩子函数。 //所以当被keep-alive包裹的一些动态组件的时候，提供了两个钩子函数***，activated deactivated*** //后续只需要把初始化的事件放入到activated里面即可，在deactivated中将初始化的定时器干掉 //通过include属性可以规定到底哪些组件可以被缓存**，默认是缓存所有的动态组件。**
<div id="app">
<button @click="type=type==='my-a'?'my-b':'my-a'">切换</button>
<keep-alive>
<component :is="type"></component>
</keep-alive>
</div>
<script src="./base/vue.js"></script>
<script>
Vue.component("my-a",{
template:"<div>my-a组件</div>",
created(){
console.log("my-a-created")
},
beforeDestroy(){
console.log("my-a-beforeDestroy")
},
activated(){
console.log("my-a-activated")
},
deactivated(){
console.log("my-a-deactivated")
}
})
Vue.component("my-b",{
template:"<div>my-b组件</div>",
activated(){
console.log("my-b-activated")
},
deactivated(){
console.log("my-b-deactivated")
}
})
new Vue({
el:"#app",
data:{
type:"my-a"
}
})
</script>
</body>
