如何解决异步造成的数据不及时更新？

Question

题目描述

代码如下，我正在编写一个组件，因为要保证单项数据流，data中的localList深度复制了props中的list，后期仅对localList进行操作。
但是我发现一个问题，就是组件初始化完成了，但是list还没有传递过数据来，就造成localList数据是空的，并且后期即使list更新了，localList也不会相应的更新，我本想用watch监听list更新，但是好像vue2对数组的监听不是很好。

题目来源及自己的思路

我在想是不是可以用v-if 判断父级组件中的list是不是空数组，当list不为空时才渲染组件，貌似可行，但不是很优雅。
所以我想问下大家这种问题该怎么办？

相关代码

export default {
    ...
    props: {
        list: Array,
    },
    data: () {
        return {
            // 数据本地化
            listLocal: JSON.parse(JSON.stringify(this.list))
        }
    }
    ...
}

Answer 1

写不写数据判断，还是根据你业务场景来考虑。
1、如果父子组件联动性很高，无触发动作。还是在子组件来做数据获取判断与提示。
2、父组件有触发动作，那就在父组件判断list是否为空并提示。根据结果渲染子组件。

但站在用户层面，我是宁愿让用户看子组件loading转圈，等有没有数据进来再说。把这个锅甩到服务器延时等等问题上去，免得用户喷你程序有问题。怎么先看到一个大白板过一会一闪数据有了。

Answer 2

不知道你的优雅怎么理解，就一行代码；
在外面包一层template，是不是显得高级了，哈哈

<template v-if="list.length>0">
    <cmp></cmp>
</template>

Answer 3

你再研究一下自己的思路吧，和优雅没关系。
一种模式就是子组件是父组件的小弟，父组件说啥我就干啥，就是基于props.list。
另一种模式就是我的地盘我做主，我自己会去拉数据然后我也自己处理，父组件最多传个where条件。
而你的想法就是把老大的东西拿来自己玩儿，而且老大递过来的东西还由自己决定要不要，站在小弟的位置摆老大的架子，这代码写的有多累。