結構

vue操作一個很有意思的報錯

[Vue warn]: You may have an infinite update loop in a component render function.

代碼：

<template><span class="show-filters" ：class="show = !show">{{ show ? '隱藏過濾器 ↑' :'顯示過濾器 ↓' }}</span> </template><script> export default {data() {return {show: true}}};</script>

分析

問題的本質

NOTE: render method is triggered whenever any state changes

即任何時候vue實例狀態的改變都會觸發渲染方法的執行

組件初始化時，將數據屬性show值為true

當渲染方法執行，內聯表達式show = !show改變了狀態

響應狀態show改變，重新執行render方法，企圖生成新的VNode節點（以便生成真實節點插入頁面）

于是產生的局面會無盡循環這樣：render - show改變 - render 重復執行步驟2-3-2

v-for

類似同樣的報錯，還很有可能在v-for指令中產生，如下

<div v-for="item in model.items" v-bind:class="test(item.result)"> {{item.id}} </div>

vue部分

data() {return {accept: false,not_accept: false,}; }, methods: {test(result) {if (result == 'accept') {this.accept = true;this.not_accept = false;} else if (result == 'Not accept') {this.accept = false;this.not_accept = true;} else {console.log(result);}return {success: this.accept,danger: this.not_accept,};}, },

• 也會出現如題報錯，其原因是在for循環中 （render - test - render ）間接修改了data響應數據而且沒有終止條件。但是記住狀態的改變會導致渲染方法的執行，上述兩種情況的相同點在于，執行渲染時，又會改變狀態，于是又渲染，遲遲不能生成真實節點，不休了。

解決方案

對同一依賴響應數據屬性在同一實例的生命周期內只作一次變更。
比如：對示例一，將屬性綁定改為vue事件綁定，事件是在下一次tick執行渲染
對于示例二，for指令通常只用來讀取數據，而非寫入響應數據。如需寫入數據，無論直接還是間接操作都不要改變響應數據，如下所示：

methods: {test(result) {let accept;if (result == 'accept') {accept = true;} else if (result == 'Not accept') {accept = false;} else {console.log(result);}return {success: accept,danger: !accept,};}, }

小結

• 慎用內聯表達式，對于自定義vue屬性而言，它會被渲染器自執行，上述兩個小錯誤同樣報錯便如此
• 盡可能用事件改變狀態 ，驅動頁面渲染重繪

總結

以上是生活随笔為你收集整理的工作214：结构 vue操作一个很有意思的报错 [Vue warn]: You may have an infinite update loop in a component的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。