一、生命周期钩子
1、挂载流程
初始化生命周期->beforecreate->数据代理->created->初始化虚拟DOM->beforemount->虚拟DOM转化为真是DOM并挂在在页面->mounted
2、更新流程
数据发生改变->beforeupdate(此时数据发生改变，页面没变)->对比虚拟DOM，生成页面->updated(页面和数据都更新)
3、销毁流程
vm.$destroy()-> beforedestroy(销毁前准备工作)->destoryed()
二、重要的生命周期钩子
1、mounted
发送ajax请求、启动定时器、绑定自定义事件、订阅消息等[初始化操作]
2、beforedestroy
清除定时器、解绑自定义事件、取消订阅消息等[首尾工作]
三、销毁Vue实例
1、销毁后借助Vue开发者工具看不到任何信息
2、销毁后自定义的事件会失效，原生dom不失效
3、一般不会在beforedestroy钩子操作数据，即使操作了，也不会触发新的流程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生命周期钩子</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 使用定时器操作透明度 -->
<div id="container">
<h2 :style="{opacity: tmd}">Hello World</h2>
<button @click="stopTimer">停止</button>
</div>
<script type="text/javascript">
new Vue({
el:'#container',
data:{
tmd:1
},
methods: {
stopTimer(){
this.$destroy()
}
},
mounted() {
console.log("mounted")
this.timer = setInterval(() => {
console.log('setInterva')
if (this.tmd<=0) {
this.tmd=1
} else {
this.tmd-=0.01
}
}, 10);
},
beforeDestroy() {
clearInterval(this.timer)
},
})
</script>
</body>
</html>
标签：生命周期,销毁,DOM,钩子,Vue,mounted From： https://www.cnblogs.com/wt7018/p/18645450