关于Vue生命周期的一些理解记录

今天遇到个问题，大致是这样的：从父组件向子组件传值，第三层数据终端报错undefined，先上测试代码：

父组件<template lang="html">    <div>        <son :data="data1"></son>    </div></template><script>import Son from '../son/index.vue'export default {    data(){        return {            data1:{}        }    },    mounted(){        this.data1={            name:'最外层',            value1:{                name:'第一层',                value2:{                    name:'第二层',                    value3:{                        name:'第三层'                    }                }            }        }    },    components:{        Son    }}</script>

子组件<template lang="html">  <div>      最外层      {{data.name}}      <div>          第一层          {{data.value1.name}}          <div>              第二层              {{data.value1.value2.name}}              <div>                  第三层                  {{data.value1.value2.value3.name}}              </div>          </div>      </div>  </div></template><script>export default {    props:['data']}</script>

解决办法是将mounted中的赋值过程，改在beforeMount或者created中进行。或者先给data一个空的数据结构。
原因是子组件渲染时，data的赋值还没进行，所以属性都是undefined