关于如何学习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组件停用时调用
注意：
-
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
<p @click="changeMsg" ref='msg'>{{msg}}</p>
<p>{{msg1}}</p>
<p>{{msg2}}</p>
<p>{{msg3}}</p>
//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()的回调函数中。
- 生命周期钩子的一些使用方法：
beforecreate: 可以在这加个loading事件，在加载实例时触发
created: 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted: 挂载元素，获取到DOM节点
updated: 如果对数据统一处理，在这里写上相应函数
beforeDestroy: 可以做一个确认停止事件的确认框
nextTick: 更新数据后立即操作dom
