持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

生命周期

作用：特定的时间点，执行某些特定的操

场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据

生命周期分为 : 初始化阶段，挂载阶段，更新阶段，销毁阶段

1.初始化阶段

beforeCreate :

初始化前，开始给data,computed,methods等传递数据，但还没有传递完成

created

初始化完成 : 这个阶段已经数据初始化完成，data,computed,methods等传递数据完成，大多情况下，created钩子函数是我们用到最多的一个钩子

2.挂载阶段

beforeMount :

挂载前，开始渲染页面，但是页面还没有渲染完成，访问不到Dom

mounted

挂载后 : 页面渲染完成，可以访问真是的Dom

3.更新阶段

beforeUpdate

更新前，数据已经修改，但真实DOM还没有更新

updated

更新后 : 数据修改完成，真实DOM也更新完成，一般，在这个阶段，获取DOM

4.销毁阶段

beforeDestroy

销毁前，一般需要清除定时器，/全局的时间等

mounted

更新后 : 数据和DOM销毁

生命周期函数执行过程

    <template>
      <div>
        <ul id="myUl">
          <li v-for="(item, ind) in arr" :key="ind">{{ item }}</li>
        </ul>
        <button
          @click="arr.push(Math.random() * 10)"
        >
          增加一个元素
        </button>
      </div>
    </template>

    <script>
    export default {
      data () {
        return {
          msg: "我是变量",
          arr: [1, 2, 3, 4]
        }
      },
      beforeCreate () {
        // 1. 创建前
        console.log("beforeCreate --- 实例初始化前")
        console.log(this.msg) // undefined
      },
      created () {
        // 2. 创建后=> 发送ajax请求
        console.log("created ---  实例初始化后")
        console.log(this.msg) // "我是变量"

        // 给对象添加属性
        this.timer = setInterval(()=>{
          console.log(Date.now())
        }, 1000)
        this.fn = ()=>{ console.log(Date.now())}
        document.addEventListener('mousemove', this.fn)
      },
      beforeMount () {
        // 3. 挂载前
        console.log("beforeMount --- vue的虚拟DOM, 挂载到真实的网页之前")
        console.log(document.getElementById("myUl")) // null
        // console.log(document.getElementById("myUl").children[1].innerHTML) // 报错
      },
      mounted () {
        // 4. 挂载后=> 操作dom
        console.log("mounted --- vue的虚拟DOM, 挂载到真实的网页上 ")
        // console.log(document.getElementById("myUl").children[1].innerHTML)
        console.log(document.querySelector('#myUl').children[1].innerText)
      },
      beforeUpdate () {
        // 5. 更新前
        console.log("beforeUpdate --- 数据更新, 页面更新前")
        // 比如点击新增数组元素, vue会触发此生命周期函数, 但是此时页面并未更新, 所以获取不到新增的li标签
        // console.log(document.getElementById("myUl").children[4].innerHTML) // 报错
      },
      updated () {
        // 6. 更新后
        console.log("updated --- 数据更新, 页面更新后")
        console.log(document.getElementById("myUl").children[4].innerHTML)
      },
      beforeDestroy () {
        // 7. 销毁前
         // (清除定时器 / 解绑js定义的事件)
        console.log("beforeDestroy --- 实例销毁之前调用")
      },
      destroyed () {
        // document.removeEventListener('mousemove', 回调函数的名字)
        document.removeEventListener('mousemove', this.fn)
        // clearInterval(this.timer)
        // 8. 销毁后
        // (清除定时器 / 解绑js定义的事件)
        console.log("destroyed --- 销毁完成")
      }
    };
    </script>