Vue(篇幅四)

关于如何学习Vue，Vue的缔造者尤雨溪前辈曾经在知乎发表过一篇新手向：Vue 2.0 的建议学习顺序。
关于Vue其他知识介绍：
篇幅一
篇幅二
篇幅三

7. 生命周期钩子

• beforeCreate:
  在实例初始化之后，数据观测(data ovserver)和event/watcher事件配置之前被调用
  $el:undefined
  $data:undefined
• created:
  在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始。
  $el:undefined
  $data:[object object]
• beforeMount:
  在挂载开始之前被调用：相关的 render 函数首次被调用。
  该钩子在服务器端渲染期间不被调用。
  $el:undefined
  $data:[object object]
• mounted:
  el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
  $el:[object HTMLDivElement]
  $data:[object object]
• beforeUpdate:
  数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
  你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
• updated:
  由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
  当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或watcher取而代之。
• beforeDestroy:
  实例销毁之前调用。在这一步，实例仍然完全可用。
• destroyed:
  Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
• activated
keep-alive 组件激活时调用
• deactivated
keep-alive 组件停用时调用
  注意：

1. Vue.nextTick 和 vm.$nextTick
   以下内容来自Vue官网:异步更新队列
   可能你还没有注意到，Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会一次推入到队列中。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MutationObserve，如果执行环境不支持，会采用 setTimeout(fn, 0) 代替。
   例如，当你设置 vm.someData = 'new value' ，该组件不会立即重新渲染。当刷新队列时，组件会在事件循环队列清空时的下一个“tick”更新。多数情况我们不需要关心这个过程，但是如果你想在 DOM 状态更新后做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

//html
{{msg}}
{{msg1}}
{{msg2}}
{{msg3}}

//js
data: function(){
  return {
    msg: '没有更新',
    msg1: '',
    msg2: '',
    msg3: '',
  }
},
methods: {
  changeMsg(){
    this.msg = ' 更新完成'
    this.msg1 = this.$ref.msg.textContent // 打印没有更新
    this.$nextTick(() => {
        this.msg2 = this.$refs.msg.innerHTML  //打印更新完成
      })
      this.msg3 = this.$refs.msgDiv.innerHTML  打印没有更新
  }
}

什么时候需要到Vue.nextTick()?

• 在 Vue 生命周期的 created() 钩子函数进行的 DOM 操作一定要放在 Vue.nextTick()的回调函数中。原因是什么呢，原因是在 created() 钩子函数执行的时候 DOM 其实并未进行任何渲染，而此时进行 DOM 操作无异于徒劳，所以此处一定要将 DOM 操作的 js 代码放进 Vue.nextTick() 的回调函数中。与之对应的就是 mounted() 钩子函数，因为该钩子函数执行时所有的 DOM 挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。
• 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的 DOM 结构的时候，这个操作都应该放进 Vue.nextTick() 的回调函数中。

2. 生命周期钩子的一些使用方法：
   beforecreate : 可以在这加个loading事件，在加载实例时触发
   created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
   mounted : 挂载元素，获取到DOM节点
   updated : 如果对数据统一处理，在这里写上相应函数
   beforeDestroy : 可以做一个确认停止事件的确认框
   nextTick : 更新数据后立即操作dom