1.Vue属性执行顺序

props->data->computed->watch->created->mounted->methods

2.Vue中的父子组件生命周期执行顺序

Vue生命周期执行顺序

beforeCreate->created->beforeMount->mounted->beforeUpdate->updated->activated->deactivated->beforeDestroy->destroyed

其中，activated和deactivated为keep-alive路由缓存的钩子函数。

父子组件加载渲染顺序

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

父子组件更新顺序

父beforeUpdate->子beforeUpdate->子updated->父updated

父子组件销毁顺序

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

在父组件中，调用接口获取数据传递给子组件时，由于接口是异步的，所以可能会导致子组件获取不到父组件传递的数据，主要解决方法如下：

方法一：在子组件标签上使用v-if判断接口数据，当接口数据存在时，再引入子组件。

...
<dept-map v-if="deptMapData"></dept-map>
...

方法二：在子组件中使用watch监听数据，当接口数据变化时再做处理。

DeptMap.vue

...
props: {
        deptMapData: {
            type: String,
            default: ''
        }
},
watch: {
    deptMapData(newValue, oldValue) {
        this.deptMapData = newValue;
    }
},
...

Vue属性执行顺序和父子组件生命周期执行顺序

1.Vue属性执行顺序

2.Vue中的父子组件生命周期执行顺序