熟悉 Vue ？你能解释这个死循环吗？

最新填坑：Vue 源码(一)：响应式原理css

======= 最新：官方已修复 =================html

好久没关注，发现这个问题几个月后，有人提了相关issue，bug已修复vue

见：github.com/vuejs/vue/i…git

github.com/vuejs/vue/p…github

====== 更新线 =====
评论区有了相关讨论，贴更详细一点的解释出来
====== 更新线 =====
循环出现的条件：浏览器

key="Math.random()"
子组件在 created 中输出计算属性并改变 data

与 Vue watcher 的添加机制有关，初步认为是 Vue 的小 bug，dep 对象的 targetStack 管理不当致使markdown

================== 分割线 ===============app

把下面的代码拷到你的 html 文件，在浏览器打开你会看到控制台报了死循环的错，知道为何吗？dom

<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>
复制代码