组件生命周期
beforeCreated：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。（挂载阶段还没开始，$el property尚不可用。）
beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。
mounted：实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick：
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
activated：被 keep-alive 缓存的组件激活时调用。该钩子在服务器端渲染期间不被调用。
deactivated:被 keep-alive 缓存的组件停用时调用。该钩子在服务器端渲染期间不被调用。
构建组件 - keep-alive: 能在组件的切换过程中将状态保存到内存中，防止重复渲染DOM
beforeDestroy: 实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。
destroyed:实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。该钩子在服务器端渲染期间不被调用。
Vue.component('Test',{
data:function(){
return{
msg:"hello world"
}
},
template:'<div>' +
'<div>{
{msg}}</div>' +
'<button @click="changeHandler">改变</button>' +
'</div>',
methods:{
changeHandler:function(){
this.msg=this.msg+"Hi,Vincent";
}
},
beforeCreate:function(){
// 组件创建之前
console.log(this.msg);//undefine
},
created:function(){
// 组件创建
console.log(this.msg);
// 使用该组件，就会调用created
// 在created这个方法中可以操作后端的数据 数据驱动视图
// 应用：发送ajax请求
},
beforeMount: function () {
//挂在数据到DOM之前会调用
console.log(document.getElementById('app'));
},
mounted: function () {
//挂在数据到DOM之后会调用Vue作用后的DOM
console.log(document.getElementById('app'));
},
beforeUpdate: function () {
// 在更新DOM之前 调用该钩子，应用：可以获取原始的DOM
console.log(document.getElementById('app').innerHTML);
},
updated:function(){
// 在更新DOM之后 调用该钩子，应用：可以获取最新的DOM
console.log(document.getElementById('app').innerHTML);
},
beforeDestroy:function(){
console.log('beforeDestroy');
},
destroyed: function () {
console.log('destroyed');
},
activated:function(){
console.log('activated');
},
deactivated: function () {
console.log('deactivated');
}
});
var App={
data: function () {
return{
isShow:true
}
},
// vue内置组件<keep-alive>
// 能在组件的切换过程中将状态保存到内存中，防止重复渲染DOM
template:'<div class="app">' +
'<keep-alive>' +
'<Test v-if="isShow"/>' +
'</keep-alive>' +
'<button @click="isShow=!isShow">改变生死</button>' +
'</div>'
};