vue生命周期和钩子函数分析

生命周期

生命周期简介

先来两张祖传图：

beforeCreat

<template>
  <div class="home">
    {
     {
     a}}
  </div>
</template>

<script>
// @ is an alias to /src

export default {
     
  name: 'Home',
  data () {
     
    return {
     
      a: 1
    }
  },
  components: {
     
  },
  beforeCreate: function () {
     
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.a)
    console.log(this)
  }
}
</script>

可以看出这个时候是vue对象刚创建，但是没有挂载和data初始化
**解释：**这个时期，this变量还不能使用，在data下的数据，和methods下的方法，watcher中的事件都不能获得到；

Created

created: function () {
     
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.a)
    console.log(this)
  }

可以看到这个时候，data已经被初始化，并且可以访问属性（完成了 data 数据的初始化，el的初始化未完成。用来发送ajax）
解释： 这个时候可以操作vue实例中的数据和各种方法，但是还不能对"dom"节点进行操作；

beforeMount

beforeMount: function () {
     
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.a)
    console.log(this)
  }

这个时候，$el应该初始化，生成虚拟dom，里面还是通过{ {a}}表示（执行此方法时已经完成了 el 和 data 初始化 （已经赋予了对应的值））
**解释：**无

Mounted

mounted: function () {
     
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.a)
    console.log(this)
  }

可以看到dom已经出来了，而且是真实dom，可以进行dom操作（执行此方法时代表已经挂载结束了）
**解释：**挂载完毕，这时dom节点被渲染到文档内，一些需要dom的操作在此时才能正常进行

beforeUpdate

<template>
  <div id="home">
    <div id="aaa">{
     {
     a}}</div>
    <button @click="genxin">genxin</button>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
     
  name: 'Home',
  data () {
     
    return {
     
      a: 1
    }
  },
  components: {
     
  },
  methods: {
     
    genxin () {
     
      this.a = 2
    }
  },
  beforeUpdate: function () {
     
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.a)
    console.log(this)
    const a = document.getElementById('aaa').innerHTML
    console.log(a)
  }
}
</script>

上面能直观看到，data里的数据已经被修改，但是真实dom里的数据没有被修改（此时DOM结构还没有重新加载）
解释： beforeUpdate是指view层的数据变化前，不是data中的数据改变前触发

Updated

这里我就不列例子了，通过上面的beforeUpdate就能看出这里肯定是已经渲染到真实dom上了
可以操作真实dom

beforeDestroy

<template>
  <div id="home">
    <div id="aaa">{
     {
     a}}</div>
    <button @click="genxin">genxin</button>
    <button @click="des">des</button>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
     
  name: 'Home',
  data () {
     
    return {
     
      a: 1
    }
  },
  components: {
     
  },
  methods: {
     
    genxin () {
     
      this.a = 2
    },
    des () {
     
      this.$destroy()
    }
  },
  beforeDestroy: function () {
     
    this.genxin()
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.a)
    console.log(this)
    const a = document.getElementById('aaa').innerHTML
    console.log(a)
  }
}
</script>

这个时候，vue实例还没被销毁，数据都能访问，还能修改，但是不会被渲染到页面上，也就是说真实dom没有被修改。（可在此处清除定时器，清除事件绑定）

destroyed

这个与beforeDestroy有什么区别，我还没搞懂，欢迎来聊