Vue生命周期

beforeCreate

在这个钩子函数里，只是初始化实例，拿不到实例里data和methods和事件监听等。

data: {
    msg: 'xx'
  },
  methods: {
    getLists(){
      return 'aaa'
    }
  },
  beforeCreate() {
    console.log('beforeCreate',this.msg,this.getLists())
  }

运行代码报错:

created

• 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 ，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el属性目前不可见。

• 这是最早能拿到实例里面的数据和方法的一个钩子函数。应用场景：异步数据的获取和对实例数据的初始化操作。

data: {
    msg: 'xx',
    imgs: null
  },
methods: {
    getLists(){
      this.$http.get(url).then(res=>{
        this.imgs = res.data.lists
        console.log(this.imgs)
      })
    }
  },
  created() {
    this.getLists()
  }

beforeMount

• 在挂载开始之前被调用：相关的render函数首次被调用。

• 不论是created还是beforeMount在它们里面都拿不到真实的dom元素，如果我们需要拿到dom元素就需要在mounted里操作

<div id="app">
      <ul>
        <li v-for="(item,index) in arr" :key="index">{{item}}</li>
      </ul>
    </div>
<script>
let app = new Vue({
 data: {
    arr: [1,2,3]
  },
created() {
    console.log('created',document.querySelectorAll('li').length)
  },
  beforeMount() {
    console.log('beforeMount',document.querySelectorAll('li').length)
  },
  mounted() {
    console.log('mounted',document.querySelectorAll('li').length)
  },
})
</script>

mounted

• 上面的代码mounted可以拿到dom元素，但也只是能拿到初始化数据里的dom元素，如果是存在异步对dom元素数据进行更改就只能在updated里获取，应用场景：初始数据（在data中有的）的dom渲染完毕，可以获取dom

<div id="app">
      <ul>
        <li v-for="(item,index) in arr" :key="index">{{item}}</li>
      </ul>
    </div>

created() {
    setTimeout(()=>{
      this.arr = [4,5,6,7]
      console.log('created',document.querySelectorAll('li').length)
    })   
  },
  mounted() {
    console.log('mounted',document.querySelectorAll('li').length)
  }

执行代码，不管是mounted还是created里拿到的length都是3，而不是4.

beforeUpdate

• 当数据更新后出发的钩子函数，这个钩子函数里拿到的是更改之前的数据,重新渲染之前被调用。

updated

• 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

• 当这个钩子被调用时，组件 DOM 已经更新，所以现在可以执行依赖于 DOM 的操作。

created() {
    setTimeout(()=>{
      this.arr = [4,5,6,7]
      console.log('created',document.querySelectorAll('li').length)
    })
    setTimeout(()=>{
      this.arr = [10,11,12,13,14]
      console.log('created',document.querySelectorAll('li').length)
    },1000)    
  },
beforeUpdate() {
    console.log('beforeUpdate',document.querySelectorAll('li').length)
  },
  updated() {
    console.log('updated',document.querySelectorAll('li').length)
  },

不要在当前钩子里修改当前组件中的data，会继续触发beforeUpdate、updated这两个生命周期，进入死循环！

上面updated执行了两遍，之所以一开始created是3是因为在一个异步里，也是在mouted后获取的所以是3。

如果想分别区别不同的数据更新，同时要对dom进行操作那么需要使用nextTick函数处理

created() {
    setTimeout(()=>{
      this.arr = [4,5,6,7]
      this.$nextTick(()=>{
        console.log('nextTick',document.querySelectorAll('li').length)
      })
    })
    setTimeout(()=>{
      this.arr = [10,11,12,13,14]
      this.$nextTick(()=>{
        console.log('nextTick',document.querySelectorAll('li').length)
      })
    },1000)
        
  },

updated，watch和nextTick区别

• updated对所有数据的变化进行统一处理

• watch对具体某个数据变化做统一处理

• nextTick是对某个数据的某一次变化进行处理

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用

destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例会被销毁。
beforeDestroy和destroyed只能通过手动触发$destroy来调用

let app = new Vue({
  beforeDestroy() {
    console.log('beforeDestroy')
  },
  destroyed() {
    console.log('destroyed')
  }

})
app.$destroy()