Question

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

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;
      })     
}

Answer 1

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

您需要在<xxx-item>上使用key，以确保将相同的组件实例用于数组中的相同项目。

例如

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

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

Answer 2

如果item属性的值已更改，则只会更新computedTest计算的属性，而不会更新您的test数据属性。

每次更改watcher属性时，您将需要使用test来更新item数据属性。

watch: {
    item: function(item) {
        this.test = item.id
    } 
}

或

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

Vue，数据和计算之间的Component值不同吗？

2 个答案: