时间戳

首页 > 解决方案 > Vue，数据和计算的组件中的值不同吗？

javascript - Vue，数据和计算的组件中的值不同吗？

问题描述

我在我的代码中发现组件数据中显示的值不是我想要的值。代码如下：

View.component('xxx-item',{
  props:['item'],
  template:`xxxx`,
  computed:{
    computedTest(){
      return this.item.id
    }
  },
  data:function(){
    return{
      test:this.item.id
    }
  }
}

xxx-item 用于列表中的项目，如下所示：

<xxx-list v-for="item in xxxList" v-bind:item="item"></xxx-list>

我认为this.test和this.computedTest的值，这意味着this.item.id应该相同。但它们实际上在某些时候是不同的。为什么？数据中的值和计算的值有什么区别？

项目数据设置如下：

function loading(){
    axiox.get(xxx)
      .then((res)=>{
        let result = [];
        for(let item of res.xxx.list){
          let obj = {};
          obj.id = item.id;
          .............
          .............
          result.push(obj);
        }
        this.xxxList = result;
      })     
}

标签： javascriptvue.jsvue-component

解决方案

Vue 将在重新渲染期间尽可能重用组件。这意味着如果您在 中添加、删除或重新排序项目xxxList，那么某些<xxx-item>组件将绑定到不同的项目。计算属性computedTest将更新以反映此更改，但数据属性test不会更改，因为它仅在组件实例化时设置一次。

您需要使用keyon<xxx-item>来确保对数组中的相同项使用相同的组件实例。

例如

<xxx-item v-for="item in xxxList" :key="item.id" :item="item">

当 Vue 更新使用 渲染的元素列表时v-for，默认情况下它使用“就地补丁”策略。如果数据项的顺序发生了变化，而不是移动 DOM 元素以匹配项的顺序，Vue 将就地修补每个元素并确保它反映应该在该特定索引处呈现的内容。

推荐阅读