vue 组件生命周期_Vue父子组件生命周期渲染顺序

前言

最近项目中的多个页面，需要增加一个相同的选项，这个选项内容也不复杂，本是一件很简单的事情，但是为了写出高质量的代码，这明显是需要编写一个通用的子组件，并把它移植到各个页面中。

编写一个通用的子组件，首先需要知悉父子组件的数据先后渲染顺序，如此一来，我们才能正确的地在子组件中，如期获取父组件的值；同样在父组件中，正确如期地获取子组件的值

生命周期

Vue的生命周期中，我们最常用的生命周期方法，莫过于created、mounted，前者是在web页面初始化时执行，后者是在web页面渲染完毕执行。

本文笔者基于 vue-cli 简单演示下，便可知道其先后顺序

父组件App.vue

子组件HelloWorld.vue

{{ msg }}

For a guide and recipes on how to configure / customize this project,
check out the vue-cli documentation.

Installed CLI Plugins

babel eslint

Essential Links

Core Docs Forum Community Chat Twitter News

Ecosystem

vue-router vuex vue-devtools vue-loader awesome-vue

结果

就像一个钩子一样，亦类似栈的先进后出