vue之生命周期

实例生命周期

每个vue实例在被创建之前都要经过一系列的初始化过程，例如，实习需要配置数据观测，编译模版，挂载实例到dom，然后在数据变化时更新dom，在这个过程中，实例也会调用一些生命周期钩子，下面我们通过一些例子来解释各个生命周期钩子。

生命周期钩子

  beforeCreate:  在实例初始化之后，数据观测，和event/watcher事件配置之前调用，
   
  new Vue({
      el: '#app',
      template:  '<App/>',
      components : { App },
      data: {
            msg: 'this is lifecycle'
      },
      methods: {
            getLists() {
                  return 'getLists'
            }
      },
      beforeCreate() {
            console.log('beforeCreate:', this.msg, this.getLists())
      }
  })

这个例子在beforeCreate阶段获取实例数据和方法，在浏览器中执行的结果如下：说明在这个阶段还不能获取数据。

image.png

    created: 实例已经创建完成之后被调用，实例已完成以下的配置：数据观测，属性和方法的运算，watch/event的回调，还是用上面这个列子

      new Vue({
      el: '#app',
      template:  '<App/>',
      components : { App },
      data: {
            msg: 'this is lifecycle'
      },
      methods: {
            getLists() {
                  return 'getLists'
            }
      },
    created() {
            console.log('created:', this.msg, this.getLists())
      }
  })

运行结果如下：

image.png

我们再看一个列子，异步从后台获取数据：
html：

        <ul>
            <li v-for="(item, index) in imgs" :key="index" v-if="imgs&&imgs.length>0">
                ![](item.image)
            </li>
        </ul>

js:

  let url = 'http://rapapi.org/mockjsdata/18071/slide/slideLists.do?'
  new Vue({
     el: '#app',
     data: {
      msg: 'this is lifecycle',
      imgs: null
    },
    methods: {
      getLists() {
         this.$http.post(url).then(res => {
        this.imgs = res.data.data.slideList
      })
    },
       init() {
              // do something
        }
   },
   beforeCreate() {
           // console.log('beforeCreate:', this.msg, this.getLists())
   },
  // 异步数据的请求适宜在created钩子中调用，初始化
  created() {
    this.getLists()
       console.log('created:',document.querySelectorAll('li').length)  // length: 1
   },
   beforeMounte() {
       console.log('created:',document.querySelectorAll('li').length)  // length: 1
   },
   mounted() {
        console.log('created:',document.querySelectorAll('li').length)  // length: 0
   },
})

结合html和js看这个列子，在控制台的结果如下图所示：

image.png

首先在这个列子中，我们异步获取数据，节点的渲染在生命钩子之后，获取li节点的长度，在beforeCreate和created钩子中，节点的长度为1，因为在这个钩子中，el还没挂载，在mounted中li节点的长度为0，因为在此钩子中，el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子，
但是由于是异步获取数据，仙剑的vm.$el中数据还没获取过来，所以获取的长度是0.
下面我们再看一个例子：在各个钩子中，动态的改变data的数据，并看他们在页面渲染的异同。
html：

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

js:

     new Vue({
        el: '#app',
        data: {
           arr: [1,  2,  3]
       },
        created() {
            setTimeout(() => {
          this.arr = [10, 11, 12, 13]
          this.$nextTick(() => {
            console.log('nextTick:',document.querySelectorAll('li').length)
        })
     },
     beforeMounte() {
          console.log('mounted:',document.querySelectorAll('li').length)
    },
    mounted() {
       console.log('mounted:',document.querySelectorAll('li').length)
    },
  //  数据更新完毕，如果对数据更新做统一处理，在updated钩子中处理即可；
   // 如果想分别区别不同的数据更新，使用nextTick函数处理即可
   beforeUpdate() {
        console.log('mounted:',document.querySelectorAll('li').length)
   }
  updated() {
        console.log('mounted:',document.querySelectorAll('li').length)
  }
})  

在浏览器运行的结果如下：

image.png

业务逻辑的处理时机

created：异步数据的获取、初始化
mounted：挂载元素内dom节点的获取
nextTick：更新数据后立即操作dom
updated：任何数据的更新，如果要做统一的业务逻辑处理
watch：监听具体数据变化，并做相应的处理