创建(create)->挂载(mount)->更新(update)->销毁(destory)
[
钩子在服务器端渲染期间不被调用
1.beforeCreate(初始化之后，event/watcher 事件配置创建前)
2.created(创建后，完成了数据观测，属性方法运算，watch/event事件回调，挂载尚未开始，$el不可见)
3.beforeMount(载入前，挂载开始前，相关render函数首次被调用)
4.mounted(el被新的Vm.$el替换，并挂载到实例上(模板中HTML渲染到页面中))
5.beforeUpdate(数据更新前调用，发生在虚拟DOM重新渲染和打补丁之前，可以在钩子中进一步更改状态，而不会触发渲染过程)
6.updated(组件DOM根据虚拟DOM的重新渲染和补丁进行变化)
7.beforeDestroy(销毁前，实例依然可用)
8.destroyed(销毁调用，指定事件解绑，子实例和监听器被移除)
]
<body>
<div id="app">
{{dataindex}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
dataindex: 1
},
beforeCreate: function() {
console.log('beforeCreate');
console.log(this.dataindex);
},
created: function() {
console.log("--------------------");
console.log('created');
console.log(this.dataindex);
},
beforeMount: function() {
console.log("--------------------");
console.log('beforeMount');
console.log(this.dataindex);
},
Mount: function() {
console.log("--------------------");
console.log('Mount');
console.log(this.dataindex);
},
mounted: function() {
console.log("--------------------");
console.log('mounted');
console.log(this.dataindex);
},
beforeUpdate: function() {
console.log("--------------------");
console.log('beforeUpdate');
console.log(this.dataindex);
},
updated: function() {
console.log("--------------------");
console.log('updated');
console.log(this.dataindex);
},
beforeDestroy: function() {
console.log("--------------------");
console.log('beforeDestroy');
console.log(this.dataindex);
},
destroyed: function() {
console.log("--------------------");
console.log('destroyed');
console.log(this.dataindex);
}
})
</script>
</body>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。