VUE实例的生命周期与VUE组件的生命周期

1、实例的生命周期：

具体的生命周期图例参考官方文档。

var newVue = new Vue({
el:"#main",
data:{},
beforeCreate:function(){
console.log(this);
}，
created:function(){

},
beforeMount:function(){

},
mounted:function(){

},
beforeUpdate:function(){

},
updated:function(){

},
beforeDestroy:function(){

},
destroyed:function(){

},
methods:{

}
})

实例中的this指的是这个实例vue对象；该对象中有识别属性id为uid，区分不同的vue实例对象。

2、组件（也是vue实例）中的生命周期

官方文档说：

Vue.component('my-component',{
template:"<div>Hello {{name}}!</div>",
data:function(){
var data = {
name:'Lily'
};
return  data; //使得每一个组件拥有自己的内部状态
},
beforeCreate:function(){
console.log(this);
}，
created:function(){

},
beforeMount:function(){

},
mounted:function(){

},
beforeUpdate:function(){

},
updated:function(){

},
beforeDestroy:function(){

},
destroyed:function(){

},
methods:{

}
})

组件（实际上也是vue实例）中的this指的是这个组件vueComponent；与（常规）实例中的生命周期不同，属于各自的生命周期；

当将组件用于实例化之后的模板域中，这两者的生命周期互不影响。所以可以在组件的生命周期中

对组件中的数据进行操作，而在实例中无法直接对组件中的值进行操作，而只能通过props属性对

组件中进行传值，组件将值存于一个局部变量进行使用，或者定义一个计算属性并将其返回。