熟悉 Vue ？你能解釋這個死迴圈嗎？

reclay發表於2019-03-04
Vue

最新填坑：Vue 原始碼(一)：響應式原理

====== 更新線 =====
評論區有了相關討論，貼更詳細一點的解釋出來

熟悉 Vue ？你能解釋這個死迴圈嗎？

====== 更新線 =====
迴圈出現的條件：

  • key="Math.random()"
  • 子元件在 created 中輸出計算屬性並改變 data

與 Vue watcher 的新增機制有關，初步認為是 Vue 的小 bug，dep 物件的 targetStack 管理不當導致

================== 分割線 ===============

把下面的程式碼拷到你的 html 檔案，在瀏覽器開啟你會看到控制檯報了死迴圈的錯，知道為什麼嗎？

<body>
    <div id="app">
        <child-comp v-for="i in [1]" :key="Math.random()" :sub-prop="parentData"></child-comp>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
        Vue.component(`child-comp`, {
            props: {
                subProp: {}
            },
            data() {
                return {
                    subData: []
                };
            },
            template: `<div></div>`,
            computed: {
                subComputed() {
                    return `222`;
                }
            },
            created() {
                console.log(this.subComputed);
                this.subData.push(1);
            }
        });
        vm = new Vue({
            el: `#app`,
            data() {
                return {
                    parentData: `hello world`
                };
            }
        })
    </script>
</body>
複製程式碼

相關文章