实战 Vue 之生命周期钩子函数执行顺序

生命周期钩子函数

beforeCreate：实例刚被创建出来，data 数据和 methods 方法还未被初始化，不能访问。用于初始化变量。

created：可以访问 data 数据和 methods 方法，不能访问 DOM 节点。用于 ajax 和页面初始化。

beforeMount：虚拟 DOM 已经创建，但是还未挂载到真实节点，可以在挂载之前更改数据。

mounted：可以访问 DOM 节点。

beforeUpdate：状态更新之前执行，页面还未渲染。

updated：页面渲染更新完成。

beforeDestroy：实例摧毁前调用，这时还可以使用实例。

destroyed：实例摧毁后调用。

activated：该钩子在服务器端渲染期间不被调用，在 DOM 节点挂载后和数据更新前调用。运用了组件缓存时，如果想每次切换都发送一次请求的话，需要把请求函数写在activated中，如果写在 created 或 mounted 中就只会在首次加载该组件时调用。

deactivated：keep-alive组件停用时调用。

其中 activated 和 deactivated 是 独有的钩子函数。也就是只有使用了 keep-alive 组件后才会有。 包裹的动态组件会被缓存，它是一个抽象组件，它自身不会渲染一个dom元素，也不会出现在父组件链中。当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

当使用了 ，页面初始化时，生命周期的执行顺序为 created -> mounted -> activated，退出或关闭页面时触发 deactivated。当再次进入（前进或者后退）时，只触发 activated。

只执行一次的事件放在 mounted 中；每次进入页面都要执行的事件放在 activated 中。

父组件与子组件执行顺序

渲染过程

子组件挂载完成后，父组件才挂载，所以挂载顺序是：

父组件 beforeCreate -> 父组件 created -> 父组件 beforeMount -> 子组件 beforeCreate -> 子组件 created -> 子组件 beforeMount -> 子组件 mounted -> 父组件 mounted

子组件更新过程

影响到父组件的顺序为：

父组件 beforeUpdate -> 子组件 beforeUpdate -> 子组件 updated -> 父组件 updated

不影响到父组件的顺序为：

子组件 beforeUpdate -> 子组件 updated

父组件更新过程

影响到子组件的顺序为：

父组件 beforeUpdate -> 子组件 beforeUpdate -> 子组件 updated -> 父组件 updated

不影响到子组件的顺序为：

父组件 beforeUpdate -> 父组件 updated

销毁过程

父组件 beforeDestroy -> 子组件 beforeDestroy -> 子组件 destroyed -> 父组件 destroyed