vue 之深入浅出各生命周期函数

},

updateMethod() {

this.updateObj.test = ++this.updateObj.test

}

},

beforeCreate: function() { // 创建实例前

console.log(‘beforeCreate 钩子执行…：’)

},

cteated: function() { // 创建实例时

console.log(‘cteated 钩子执行…：’)

},

beforeMount: function() { // 数据渲染前

console.log(‘beforeMount 钩子执行…：’)

},

mounted: function() { // 数据渲染时

console.log(‘mounted 钩子执行…：’)

},

beforeUpdate: function() { // 数据更新前

console.log(‘beforeUpdate 钩子执行…：’)

},

updated: function() { // 数据更新时

console.log(‘updated 钩子执行…：’)

},

beforeDestroy: function() { // 实例销毁前

console.log(‘beforeDestroy 钩子执行…：’)

},

destroyed: function() { // 实例销毁时

console.log(‘destroyed 钩子执行…：’)

}

}

每个生命周期函数执行顺序如图：

二、父子孙组件间各生命周期函数

==============================================================================

每个组件都会有上述的生命周期函数，但父子类组件加载的顺序如何呢？通常在实际开发中会遇到全局变量在访问时没有实时同步例如vuex、或者接口请求不是按我们开发的顺序请求等等，这时可能与在组件内部钩子函数执行顺序有关。

案例如下，

父类组件：

father

{{updateObj.test}}

子类组件：

child

{{updateObj.test}}

孙类组件：

grandson

{{updateObj.test}}