<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<button @click="msg='data更新了'">更新data中的数据</button>
<button @click="destoryzj">销毁组件</button>
</div>
<script src="./vue2.6.14.js"></script>
<script>
let vm = new Vue({
el: "#app",
data:{
msg:"我要学vue",
timer:''
},
/* 创建前 */
beforeCreate(){
/* 在这里 data中的属性值获取不到 */
/* 但是能获取到vue的实例化对象 */
/* console.log('组件实例刚被创建',this,this.msg) */
},
/* 创建后 */
created(){
/* 组件实例刚创建完成，属性已经绑定，但是DOM还未生成，$le属性还不存在 */
/* console.log(this.el,this.msg); */
/* 你请求接口就是走这个钩子函数发出的 */
/* 可以从ajax里面获取数据 */
/* setTimeout(()=>{
let data = "请求成功"
this.msg = data;
},500) */
this.timer = setInterval(() => {
console.log(123)
}, 500);
/* this.time是定时器返回的唯一id */
console.log(this.timer);
},
/* 挂载前 */
beforeMount(){
/* 模板编译、挂载之前 */
/* console.log(this.$el) */
/* this.$el只是获取到了 但是没有挂载到模板上 */
/* data里面的值是渲染不出来的 */
/* console.log( document.getElementsByTagName('h1')[0] ); */
/* console.log(document.getElementsByTagName('h1')[0].innerHTML) */
},
/* 挂载后 */
mounted(){
/* this.$el 获取到了 而且挂载到模板上 */
/* console.log(this.$el) */
/* data里面的值是可以渲染出来的 */
/* console.log( document.getElementsByTagName('h1')[0] ); */
/* console.log(document.getElementsByTagName('h1')[0].innerHTML) */
/* 在dom的操作中适合在mounted里面去执行 */
},
beforeUpdate() {
/* beforeUpdate值更新完之后，没有第一时间渲染到模板上
只是在vue的实例中把data数据给改了 */
console.log('beforeUpdate组件更新之前')
},
updated() {
/* updated是既改了data中的值，又把值渲染到了模板上 */
console.log('updated组件更新之后')
/* 使用的场景 需要改变data中数据，你还需要做一些事情（业务逻辑需要的事情，
例如埋点信息上报，echarts图获取了最新的数据需要重新渲染视图的时候），
那么这个时候就需要updated函数来触发 */
},
/* 路由进行跳转的时候，会触发下面的函数（组件之间的切换） */
beforeDestroy() {
/* 执行beforeDestroy的vue的实例化对象还存在，还没有被完全的销毁 */
console.log('beforeDestroy组件销毁前调用')
},
destroyed() {
/* 在执行destroyed的时候，组件已经完全被销毁 */
console.log('destroyed组件销毁后调用')
clearInterval(this.timer)
/* 使用destroyed来清除定时器，避免全局的使用，造成性能消耗 */
},
methods: {
/* 销毁组件 */
destoryzj(){
this.$destroy()
}
},
});
/* $el是vm实例化对象上使用 */
/* console.log(vm.$el) */
</script>
</body>
</html>
