<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p id="p1">{{title}}</p>
<button @click="title='站着'">修改</button>
</div>
<button onClick="test()">销毁</button>
</body>
</html>
<script src="../day01/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
title:"今天天气好"
},
beforeCreate(){
console.log("beforeCreate")
console.log(this.title)
},
created(){
console.log("created")
console.log(this.title)
},
beforeMount(){
console.log("beforeMounte")
console.log(document.getElementById("p1").innerHTML)
},
mounted(){
console.log("mounted")
console.log(document.getElementById("p1").innerHTML)
},
beforeUpdate(){
console.log("beforeUpdate")
console.log(document.getElementById("p1").innerHTML)
},
updated(){
console.log("updated")
console.log(document.getElementById("p1").innerHTML)
},
beforeDestroy(){
console.log("beforeDestroy")
},
destroyed(){
console.log("destroyed")
}
})
function test(){
alert("sd")
vm.$destroy();
}
</script>
- beforeCreate 在执行这个钩子的时候只有实例本身的一些事件和生命周期函数 自定义的东西都用不了
- created 在这行这个钩子的时候 对象的data和methods等自定义的东西已经能用了 是最早开始使用data中数据的钩子函数 vue实例已经初始化完毕
- beforeMount 在执行这个钩子的时候,已经在内存形成一个dom树,还没有挂载到页面上
- mounted 在执行这个钩子的时候 内存和页面已经同步 mounted是最早可以操作dom节点的钩子
- beforeUpdate 当data中数据被修改的时候会调用 内存中是新的数据 页面是旧的
- updated 页面和内存已经同步 修改完成
- beforeDestroy 销毁之前 在这个钩子上 实例身上的东西都是可以使用的 可以在里面做一些释放内存的操作
- destroyed销毁完毕
- activited keep-alive专属 组件被激活时调用
10.deadctivated keep-alive专属 组件被销毁时调用
11.errorcaptured 错误捕获