Vue 2 Laravel 5.3 Infinte更新循环

Question

没有控制台日志错误，但我放入updated()钩子[在当前代码getCartItems/]中的任何内容都会因为某些我不知道的原因而无限渲染。即使我将其设置为alert('hi')，它也会无限提醒它。所以我怀疑是什么让项目不断更新价值或者其他东西，但我不知道在哪里。谁能给我一个建议来检查问题所在？

车-dropdown.vue

<template>
    <div class="row">
        <div class="col-md-12">
            <div class="row cart-dropdown-row" v-for="cart in carts">
                <div class="col-md-3">
                    <div class="cart-dropdown-img-wrapper">
                    <img class="d-flex align-self-center cart-dropdown-img" :src="cart.product_choice.img1" alt="Generic placeholder image">
                  </div>
              </div>
              <div class="col-md-6 cart-dropdown-info-wrapper">
                <h6 class="cart-dropdown-info">{{cart.product.name}}</h6>
              </div>
              <div class="col-md-3 cart-dropdown-qty-wrapper">
                <div class="cart-dropdown-qty">x{{cart.qty}}</div>
              </div>
            </div>
      </div>
    <div class="row">

    </div>
      <div class="row cart-dropdown-checkout-wrapper">
            <button type="button" class="btn btn-success btn-sm cart-dropdown-checkout" @click.prevent="goCheckout()">Check Out</button>
      </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        carts:{},
      }
    },
    props:[
    ],
    mounted(){
      this.getCartItems()
    },
    updated(){
      this.getCartItems()
    },
    methods:{
        getCartItems(){
            var vm = this
        vm.$http.get('/getCartItems/').then((response)=>{
          vm.carts = response.data
        });
        },
        goCheckout(){
        window.location.href = 'http://localhost:8000/cart'
        }
    },
    computed:{
    }
  }
</script>

Answer 1

您正在更新更新的钩子中更新vue实例数据变量carts，并且docs说：在数据更改导致重新呈现虚拟DOM之后，已调用更新的钩子修补。所以你处于一个无限循环：你更改了它更新DOM的vue数据并调用更新的块，它再次改变了数据。

docs中也提到了这一点：

  

您可以在此挂钩中执行与DOM相关的操作。但是，在大多数情况下，您应该避免在此挂钩中更改状态，因为它可能会导致无限更新循环。

您可以在以下vue实例生命周期图中看到此圈。