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

最新推荐文章于 2024-05-14 12:08:10 发布

前端独秀

最新推荐文章于 2024-05-14 12:08:10 发布

阅读量830

点赞数

分类专栏：前端文章标签： Vue.js

原文链接：https://www.mk2048.com/blog/blog.php?id=hhcc0hc2cb&title=%E7%86%9F%E6%82%89+Vue+%EF%BC%9F%E4%BD%A0%E8%83%BD%E8%A7%A3%E9%87%8A%E8%BF%99%E4%B8%AA%E6%AD%BB%E5%BE%AA%E7%8E%AF%E5%90%97%EF%BC%9F

版权

前端专栏收录该内容

493 篇文章 3 订阅

订阅专栏

====== 更新线 =====
评论区有了相关讨论，贴更详细一点的解释出来

====== 更新线 =====
循环出现的条件：

```
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>

前端独秀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
熟悉 Vue ？你能解释这个死循环吗？

====== 更新线 ===== 评论区有了相关讨论，贴更详细一点的解释出来 ====== 更新线 ===== 循环出现的条件： key="Math.random()" 子组件在 created 中输...
复制链接

扫一扫