即使使用扩展运算符，组件渲染函数中也可能存在无限的更新循环

Question

我知道这个问题以前已经回答过了，但在查看了"You may have an infinite update loop in a component render function" warning in Vue component之后，我发现解决方案不起作用。

有人能帮我弄清楚这是怎么回事吗？

<template>
  <div>
    <template v-for="listing in sortedListings">
      <listing
        :key="listing.uuid"
        :listing="listing"
        :highlight-color="listing.highlight ? getHighlightColor() : null"
      />
    </template>
  </div>
</template>

<script>
import Listing from '@/components/Listing'
export default {
  components: {
    Listing,
  },
  data: function () {
    return {
      highlightColors: this.getHighlightColors(),
      listings: [
        {
          uuid: '658f325f-33c8-455b-98f6-27eb4eaa16a0',
          title: 'Cursus Nullam Amet Tortor',
          location: 'Remote',
          url: 'http://example.net/birds',
          hours_week: 20,
          tags: ['django', 'python', 'flask'],
          logo: 'https://logo.clearbit.com/apple.com',
          company_name: 'Apple',
          show_logo: 1,
          highlight: 0,
          stick_top: 0,
        },
        {
          uuid: '658f325f-33c8-455b-98f6-27eb4eaa16a1',
          title: 'Donec id elit non mi porta gravida at eget metus',
          location: 'Remote',
          url: 'http://example.net/birds',
          hours_week: 20,
          tags: ['django', 'python', 'flask', 'full-stack', 'contract'],
          logo: 'https://logo.clearbit.com/apple.com',
          company_name: 'Mapple',
          show_logo: 0,
          highlight: 0,
          stick_top: 0,
        },
        {
          uuid: '658f325f-33c8-455b-98f6-27eb4eaa16a2',
          title:
            'Donec ullamcorper nulla non metus auctor fringilla ullamcorper dapibus',
          location: 'Remote / USA',
          url: 'http://example.net/birds',
          hours_week: 20,
          tags: ['django', 'python', 'flask', 'full-stack', 'vue.js'],
          logo: 'https://logo.clearbit.com/apple.com',
          company_name: 'Fapple',
          show_logo: 1,
          highlight: 0,
          stick_top: 1,
        },
        {
          uuid: '658f325f-33c8-455b-98f6-27eb4eaa16a3',
          title: 'Tristique Euismod Venenatis Porta',
          location: 'San Francisco, CA, USA',
          url: 'http://example.net/birds',
          hours_week: 20,
          tags: ['django', 'python', 'flask', 'full-stack', 'vue.js'],
          logo: 'https://logo.clearbit.com/apple.com',
          company_name: 'Lapple',
          show_logo: 1,
          highlight: 1,
          stick_top: 0,
        },
        {
          uuid: '658f325f-33c8-455b-98f6-27eb4eaa16a4',
          title: 'Tristique Euismod Venenatis',
          location: 'San Francisco, CA, USA',
          url: 'http://example.net/birds',
          hours_week: 20,
          tags: ['django', 'python', 'flask', 'full-stack', 'vue.js'],
          logo: 'https://logo.clearbit.com/apple.com',
          company_name: 'Dapple',
          show_logo: 1,
          highlight: 1,
          stick_top: 1,
        },
      ],
    }
  },
  computed: {
    sortedListings: function () {
      return [...this.listings].sort(function (a, b) {
        return b.stick_top - a.stick_top
      })
    },
  },
  methods: {
    getListings: async function () {},
    getHighlightColors: function () {
      return this.shuffleArray([
        '#E3F2FD',
        '#E8EAF6',
        '#FFEBEE',
        '#E0F2F1',
        '#E8F5E9',
        '#FFF3E0',
        '#FFFDE7',
      ])
    },
    getHighlightColor: function () {
      if (this.highlightColors.length === 0) {
        this.highlightColors = this.getHighlightColors()
      }
      return this.highlightColors.shift()
    },
  },
  mounted: function () {
    this.getListings()
  },
}
</script>

在计算属性sortedListings中，我已经在执行[...this.listings]了

Answer 1

扩展运算符不会深度克隆数组，排序方法会修改computed中使用的原始属性，从而生成无限循环，因此添加一个方法来深度克隆对象，如this one：

...

 computed: {
    sortedListings: function () {
      return this.deepCopy(this.listings).sort(function (a, b) {
        return b.stick_top - a.stick_top
      })
    },
  },
  methods: {
   deepCopy(src) {
     let target = Array.isArray(src) ? [] : {};
     for (let prop in src) {
      let value = src[prop];
       if(value && typeof value === 'object') {
        target[prop] = deepCopy(value);
       } else {
        target[prop] = value;
      }
   }
     return target;
  }
  ,
    getListings: async function () {},
...

Answer 2

getHighlightColor()导致了无限循环。

这是一个经典的例子，说明了为什么绑定到模板中的方法可能是不好的(并不总是)。如果你的方法改变了一个模型，Vue必须重新渲染组件。然后触发该方法并再次更改模型，然后导致组件的重新呈现，依此类推。

此演示将产生相同的结果，但如果您使用模板中的计算结果，则不会：

​

new Vue({
  el: "#app",
  data() {
    return {
      arr: [1,2,3,4,5]
    }
  },
  methods: {
    change: function () {
      return this.arr.shift();
    },
  },
  computed: {
    test() {
      return this.arr.shift();
    }
  }
});

<div id="app">
  <div>
    {{ change() }}
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

​