组件传递数据更新后，展示效果不能实时滚动

需求：

        在一个后台装修项目中写一个可滚动的模块，无数据时展示默认提示，在下方实时输入时，上方模块数据实时更新，同时当条数大于一条就开始实时滚动。

遇到的问题：

        装修框架是现有的，数据已经统一处理传递，但是无法实现滚动，打印数据发现数据条数已增加，但就是无法实时滚动，已经给组件动态绑定了key.

原因：

        我使用的是<el-carousel>这个组件，所以怀疑是传入的数据length增加了，但是这个组件可能在初始化时确定了内部状态，尽管数据更新是，vue重新渲染了dom，但是组件内部状态可能未改变。

解决方案：

        在组件外部包裹一个div,给这个div一个动态唯一的key，确保数据每次更新时key也变化，通过vue的key属性来强制vue重新渲染组件

1<div :key="carouselKey">
2  <el-carousel height="33" direction="vertical" v-if="dataList.length > 0">
3    <el-carousel-item v-for="(item, index) in dataList" :key="index">
          <!-- ....... -->
     </el-carousel-item>
4  </el-carousel>
5</div>

 

watch(
    prpos.Data,
    (newValue, oldValue) => {
        dataList.value = newValue.list;
        keyvalue = newValue.list.length;
    },
    { deep: true }
);

这样就能在数据实时更新的同时实现滚动也同步更新了