vue 渲染机制踩坑记录

最新推荐文章于 2025-07-11 18:08:36 发布

丢了猫的鱼

最新推荐文章于 2025-07-11 18:08:36 发布

阅读量269

点赞数 6

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/jiaxiaohong_csdn/article/details/149097075

一、问题描述：
项目中用到了el-tabs，el-tab-pane用到了循环遍历,列表数据为state.records,在遍历中加载子组件RecordItem，代码如下

 <el-tabs v-model='state.activeTab' :key="state.resetKey">
        <el-tab-pane v-for="record in state.records" :label='record.label' :name='record.name' :key="record.name">
          <RecordItem
            :data="record"
            @editBasicInfo="handleRecordItemEditBasicInfo"
          ></RecordItem>
        </el-tab-pane>
      </el-tabs>

在子组件RecordItem中有基本信息，表格项，其中表格项做了表格合并，表格项合并计算是在父组件计算好放入data中传过来的，为data.spanArr，在子组件接受的时候是这么定义的：

const state = recative({
   spanArr: props.data.spanArr,
})

在表格合并方法里也是用的state.spanArr,完事我的功能涉及到一个移动，比如TabA页面表格项移动到TabB页面的表格里,表格项、合并组spanArr都是在父组件计算的，完事移动完的TabB页面表格项合并样式错乱，我刚开始脑子没反应过来，一直打印信息看props.data.spanArr也没问题啊，弄了半天，才意识到我表格合并的方法里用的state.spanArr,而state.spanArr只是在第一次渲染的时候赋值了，一直是旧的值。
二、解决方案

①子组件里监听props.data.spanArr的值给state.spanArr赋值；
②表格合并方法里直接读取props.data.spanArr；
三、反思：也是大大的无语，在我意识里以为props.data.spanArr改变了，子组件的state.spanArr也就自动变了，其实他只是第一次循环加载的时候渲染了一次；