<!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="./vue.js"></script>
</head>
<body>
<div id="app">
<div class="box">
{{message}}
</div>
<button @click="changemessage">点击</button>
</div>
<script>
// 生命周期:从创建到销毁的过程,vue会提供生命周期的事件钩子
// 事件钩子 也是 配置项里的内容
// 1.el 2.data 3.methods 4.computed 5.watch 6.render 7.template
// 生命周期 一、初始化 二、更新 三 销毁
/*
// 一、初始化阶段
beforeCreate()
初始化阶段,应用不多
created() :ajax :数据准备完成,dom还没有生成
在实例创建完成后被立即调用,该阶段完成了对 data 中的数据的 observer,该阶段可以处理一些异步任务
beforeMount()
在挂载开始之前被调用,应用不多
mounted() :已经可以获取真实的dom结构,可以进行dom操作
该阶段执行完了模板解析,以及挂载。同时组件根组件元素被赋给了 $el 属性,该阶段可以通过 DOM 操作来对组件内部元素进行处理了
二、更新阶段 (有改变)
beforeUpdate()
数据更新时调用,但是还没有对视图进行重新渲染,这个时候,可以获取视图更新之前的状态
updated()
由于数据的变更导致的视图重新渲染,可以通过 DOM 操作来获取视图的最新状态
三、销毁阶段
beforeDestroy()
实例销毁之前调用,移除一些不必要的冗余数据,比如定时器
destroyed()
Vue 实例销毁后调用
*/
let vm = new Vue({
el:"#app",
data:{
message:"数据",
timer:0
},
methods:{
changemessage(){
this.message = "修改了";
}
},
beforeCreate:function(){
console.log("beforeCreate");
},
created(){
console.log("created,数据准备完毕,ajax");
},
beforeMount(){
console.log("beforeMount");
},
mounted(){
console.log("mounted:真实的dom已经生成")
this.timer = setTimeout(() => {
console.log("定时器");
}, 3000);
// console.log(document.querySelector(".box"));
},
beforeUpdate(){
console.log("beforeUpdate",this.message);
},
updated(){
console.log("updated",this.message);
},
beforeDestroy(){
clearTimeout(this.timer);
// 收尾工作:清空登录状态 ,开启的定时器
console.log("beforeDestroy");
},
destroyed(){
console.log("destroyed");
}
// template:"<h1>我是标题</h1>"
// render(createElement){
// let vdom = createElement("div","我是div");
// console.log(vdom);
// return vdom;
// }
})
// vm.$destroy(); // 手动销毁实例化对象
</script>
</body>
</html>