Vue.js；带手表的有限循环

我有一个带有数组的while循环。但是，由于

dealerCards

数组没有更新，即使它是在

watch

中设置的，该循环也会变得无限大。如何使用

watch

属性续订阵列

<div id="app14">
    <button v-on:click="Stand">Stand</button>
    <p>Dealer: {{dealerCards}}</p>
    <p>Hand: {{dealerHand}}</p>
</div>


<script>
function Draw() {
    return Math.ceil(Math.random() * 13);
}

function CalcHand(cardsArray) {
    cardsArray.forEach(function(c) {
        hand += c;
    });
    return hand;
}


new Vue({
    el: "#app14",
    data: {
        dealerCards: [],
        dealerHand: 0,
    },
    methods: {
        Stand: function() {
            while (this.dealerHand < 17) {
                this.dealerCards.push(Draw());
                console.log("DH: " + this.dealerHand);
            }
        },
    },
    watch: {
        dealerCards: {
            handler: function() {
                this.dealerHand = CalcHand(this.dealerCards);
            },
            deep: true
        },
    }
});

</script>

站
经销商：{{dealerCards}

手：{{dealerHand}

函数绘图（）{
返回Math.ceil（Math.random（）*13）；
}
函数CalcHand（cardsArray）{
cardsArray.forEach（函数（c）{
手+=c；
});
回手；
}
新Vue({
el:#附录14“，
数据：{
经销商卡：[]，
dealerHand:0，
},
方法：{
立场:功能(){
而（此值小于17）{
this.dealerCards.push（Draw（））；
console.log（“DH:+this.dealerHand”）；
}
},
},
观察：{
经销商卡：{
处理程序：函数（）{
this.dealerHand=CalcHand（this.dealerCards）；
},
深：是的
},
}
});

监视从不运行。通常，同步操作使用computed，异步操作使用watch：

newvue({
el:#附录14“，
数据：{
经销商卡：[]，
},
计算：{
dealerHand（）{
返回CalcHand（此.dealerCards）；
}
},
方法：{
立场:功能(){
而（此值小于17）{
this.dealerCards.push（Draw（））；
console.log（“DH:+this.dealerHand”）；
}
},
}
});

编辑：我忘了提到，通过初始化

hand

来修复

CalcHand

函数。更好的方法是，将其替换为一行，并将其移动到计算：

计算：{
dealerHand（）{
返回此.dealerCards.reduce（（a，c）=>a+c，0）；
}
},

演示：

函数绘图（）{
返回Math.ceil（Math.random（）*13）；
}
新Vue({
el:#附录14“，
数据：{
经销商卡：[]，
},
计算：{
dealerHand（）{
返回此.dealerCards.reduce（（a，c）=>a+c，0）；
}
},
方法：{
立场:功能(){
而（此值小于17）{
this.dealerCards.push（Draw（））；
console.log（“DH:+this.dealerHand”）；
}
},
}
});

站
经销商：{{dealerCards}

手：{{dealerHand}

很有效，非常感谢。实际上，CalcHand函数更复杂。它不仅仅是计算数组的和。如果您使用
computed
而不是
watch
？