Vue生命周期钩子介绍vue生命周期钩子官方文档：官方文档图解介绍：生命周期图示官方文档详细介绍：vue生命周期钩子

vue生命周期钩子官方文档：
- 官方文档图解介绍：生命周期图示
- 官方文档详细介绍：vue生命周期钩子介绍
==vue生命周期钩子介绍： vue从创建到销毁过程中，会执行的一些回调函数==
- 钩子 ：一种回调函数
  - 例如
    - window.onload = function(){ dom加载完毕，外部资源加载完毕就执行 }
- 生命周期 ： vue实例从出生到扑街的过程
  - 出生：
    - 创建vue实例
    - 创建data数据
    - 创建el挂载点
    - 将data数据渲染到el挂载点
  - 扑街
    - vue实例被销毁
      - 这里销毁不是指vue实例变成了null，而是指解除data与el的关联
        
        说人话：修改了data，页面不会被渲染
==注意点==
- 根据官网文档介绍：每一个生命周期钩子中的this都是指向vue实例
- 所以，生命周期钩子不能是箭头函数

vue的生命周期钩子分为四大阶段,8个方法

初始化
挂载
更新
销毁

执行顺序	钩子函数	执行时机
1	`beforeCreate(){}`	vue实例创建了，但是el和data还没有创建（准备创建data）底层（初始化vue实例，初始化钩子函数，初始化一些事件和侦听器配置项）
2	`created() {}`	data数据创建了，但是el挂载点还没有创建 (准备创建el) 底层：初始化data中的数据和methods中的方法
3	`beforeMount() {}`	el挂载点创建了，但是data数据还没有渲染（准备渲染中）底层：创建el挂载点，并且生成虚拟DOM
4	`mounted() {}`	data数据第一次渲染完毕 (完成初始渲染) 底层：将虚拟dom渲染成真实DOM
5	`beforeUpdate() {}`	检测到data数据变化，但是还没有开始重新渲染 (data变了，准备重新渲染中) `会执行多次`
6	`updated() {}`	变化后的data数据，完成渲染到页面（完成重新渲染）`会执行多次`
7	`beforeDestroy() {}`	vue实例销毁即将销毁(解除data与el的关联),之后修改data，页面不会被渲染底层：解除事件绑定、侦听器、组件
8	`destroyed() {}`	vue实例已经销毁

<template>
  <div>
    <button @click=" name='李四' ">点我改名字</button>
    <button @click="$destroy()">点我销毁</button>
    <p>{{ name }}</p>
    <p>{{ age }}</p>
  </div>
</template>

<script>
/* 

1. vue生命周期钩子 : vue从初始化到销毁的过程中会执行的函数

2. 四个阶段8个钩子 : 8个 
  (1)初始化阶段:  beforeCreate、 created
  (2)挂载阶段 : beforeMount、mounted
  (3)更新阶段 : beforeUpdate、updated
  (4)销毁阶段:  beforeDestroy、destroyed

3. vue初始渲染会执行哪些钩子 : 4个
  beforeCreate`    
  created
  beforeMount
  mounted

4. 两个常用
    created() :  一般用于发送ajax（页面一加载需要发送ajax在这个勾子）
    mounted() :  一般用于操作DOM（页面一加载需要操作DOM在这个勾子）

5. 有两个钩子会执行多次，其他钩子都是执行一次
    beforeUpdate、
    updated
*/
export default {
  data() {
    return {
      name: "张三",
      age: 20
    };
  },
  methods: {
    doClick() {
      console.log(1111);
    }
  },
  /* 生命周期钩子 */
  // 1. beforeCreate() :  创建了vue实例，但是还没有创建data
  beforeCreate() {
    console.log(1);
    console.log(this);
    console.log(this.name);
  },
  // 2.created() : 创建了data,但是还没有挂载
  /* 常用: 最早可以获取data的钩子， 一般在这个钩子发送ajax */
  created() {
    console.log(2);
    console.log(this);
    console.log(this.$el);
    console.log(this.name);
  },
  // 3.beforeMount() : 创建挂载点，但是还没有把data挂载到el
  beforeMount() {
    console.log(3);
    console.log(this);
    // html环境,这个钩子$el可以获取挂载点。  脚手架环境, 这个钩子$el获取的是undefined
    console.log(this.$el);
    const p = document.querySelector("p");
    console.log(p); //null 没有渲染,所以无法获取dom
  },
  // 4.mounted() : 完成初始渲染。 把data数据渲染到挂载点el
  /* 常用: 最早可以操作DOM的钩子 */
  mounted() {
    console.log(4);
    console.log(this);
    console.log(this.$el);
    const p = document.querySelector("p");
    console.log(p); // p标签 完成渲染
  },
  // 5.beforeUpdate() : 检测到data数据发生变化,但是还没有更新el
  beforeUpdate() {
    console.log(5);
    console.log(this);// 获取的是变化后的数据, 但是页面还是显示之前的数据
  },
  // 6.updated(): 更新之后的data,完成渲染
  updated() {
    console.log(6);
    console.log(this);
  },
  // 7.beforeDestroy(): 正在销毁(接触data与el绑定、移除事件监听、移除侦听器)
  /*触发销毁钩子的两个条件 
  (1)对组件使用v-if
  (2)调用组件的 this.$destroy() 
  */
  beforeDestroy() {
    console.log(7);
    console.log(this);
  },
  //8.destroyed(): 完成销毁
  destroyed() {
    console.log(8);
    console.log(this);
  }
};
</script>

<style>
</style>