let vm = new Vue({ el: "#app", data:{ msg:"我要学vue", timer:'' }, /* 创建前 / beforeCreate(){ / 在这里 data中的属性值获取不到 / / 但是能获取到vue的实例化对象 / / console.log('组件实例刚被创建',this,this.msg) / }, / 创建后 / created(){ / 组件实例刚创建完成，属性已经绑定，但是DOM还未生成，$le属性还不存在 */
/* 你请求接口就是走这个钩子函数发出的 */
/* 可以从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) */
