vue的生命周期

Vue实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们成为Vue 实例的生命周期，钩子就是在某个阶段给你一个做某些处理的机会。

1.beforeCreate( 创建前 )

在这个钩子函数里，只是刚开始初始化实例，你拿不到实例里的任何东西，比如data和methods和事件监听等。

2.created ( 创建后 ）

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

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

在这个函数里面 就是我们定义好的方法在这个里面可以直接执行

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

这样我们在打开页面的时候就可以调用这个 this.getLists() 这个方法

3.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>

 

 

4.mounted

5.beforeUpdate

6.updated

7.beforeDestroy

8.destroyed