熟悉 Vue ？你能解釋這個死循環嗎？

時間 2019-11-22

標籤熟悉 vue 解釋這個循環简体版

原文原文鏈接

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

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

====== 更新線 =====
循環出現的條件：

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

與 Vue watcher 的添加機制有關，初步認爲是 Vue 的小 bug，dep 對象的 targetStack 管理不當致使vue

================== 分割線 ===============瀏覽器

把下面的代碼拷到你的 html 文件，在瀏覽器打開你會看到控制檯報了死循環的錯，知道爲何嗎？app

<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>
複製代碼

相關標籤/搜索