Vue知识点(生命周期)

实例创建之后（全局new的Vue对象已经存在），数据初始化之前的状态。
此时，直接获取data中的属性会拿到undefined，直接获取props中的属性会直接报错（this.$props为undefined）
一般在此状态显示loading图标

在此状态时，判定new Vue对象时有没有传入el参数，
	若没有，则终止生命周期。直到Vue对象调用$mount(el)为止。
接着判断传给Vue对象的参数中有没有template参数
	若有，则将它作为模板编译成render函数。
	若没有，则将外部html作为模板编译
new Vue时还可以传入一个render方法，它以createElement函数作为参数做渲染操作
举个栗子： ````javascript
    new Vue (
    el: '#app',
    render: function(createElement) {
        return createElement('h1', 'Hi, I am Asser!')
    }
) ````
其中的优先级如下：
	render > tempalte > outerHTML

数据初始化之后
此时，data的属性可以正常取值，this.$props下的属性也可以正常取值
一般在此状态
注意：data中的属性无法直接调用另一个属性。假如需要如此操作，需要利用computed进行调用

在此状态时，创建vm.$el，并且用它替换el属性对应的dom元素

在此状态时，vm.#el挂载完成，可以对组件内部的dom进行操作

对data属性中的值进行修改时，会触发视图上的变化
beforeUpdated 和 updated会先后执行

注意：当data的属性为引用类型时（数组或者对象）要特别当心
	对于数组
		当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue （ 使用Vue.set(vm.items, indexOfItem, newValue) ）
		当你修改数组的长度时，例如：vm.items.length = newLength ( 使用vm.items.splice(newLength) )

		都不可以更新视图
	对于对象
		Vue 不能检测对象属性的添加或删除 （ 使用Vue.set(vm.userProfile, 'age', 27) ）
		在响应式添加新属性时，使用如下方法：
		vm.userProfile = Object.assign({}, vm.userProfile, {
		  age: 27,
		  favoriteColor: 'Vue Green'
		})
同时还需要注意：
	由于事件循环机制，无法在改变data之后，立刻获取更新的视图。假如要实现此种需求，需要使用this.$nextTick(fn)	

此时组件实例还是可以正常调动

组件实例被销毁后调用，在不使用keep-alive的情况下，切换路由会导致组件实例销毁	

keep-alive组件用于缓存对应的组件状态和防止组件重新渲染。
props： inclue和exclude 
	include：使用字符串或者正则表达式，匹配到的组件都会被缓存
	exclude: 使用字符串或者正则表达式，匹配到的组件都不会被缓存

在使用keep-alive组件进行组件缓存操作时，会多出这两个生命周期。

组件被激活时，activated被调用，当组件停用时deactivated被调用，类似于destroyed。
因为在keep-alive下，切换路由时，不会触发destoryed这个hook