页面第一次加载的时候，函数为什么会执行两次？

[wuguojun1006]

先上代码：

问：
在页面第一次加载的时候函数val会执行两次，生命周期只执行一次。
问题只出现再vue-element-admin项目中，vue-cli新建项目只会执行一次。
不知道问题的原因出在哪里，希望作者可以解答一下

复现步骤：
1.启动vue-admin-templat项目
2.在任意父组件下引用一个子组件（我是在dashboard组件下）
3.父组件写法如上图所示，随便打印值
4.子组件可以什么都不写，只写一个props属性（可为空）
5.子组件有props属性的时候，父组件会打印两次，没有props的时候只打印一次

[mayunhai]

模仿了上面代码 只打印了一次结果 没法复现问题

[wuguojun1006]

模仿了上面代码 只打印了一次结果 没法复现问题

随便写个子组件在父组件中应用，如图中的page-list，子组件加上props属性，其他可以不写，试试

[PanJiaChen]

请提可复现步骤。

[wuguojun1006]

请提可复现步骤。

已更新

[PanJiaChen]

没能重现，你提供一个重现的仓库吧。

[wuguojun1006]

没能重现，你提供一个重现的仓库吧。

仓库：https://github.com/wuguojun1006/vue-admin2
运行后http://localhost:9528/#/dashboard 这个页面的打印值
大佬没复现的话可能是我自己的问题，但是真的找不到问题在哪，如果大佬能看出来的话，还请指定一下

[mayunhai]

我试了一下 如果你把 hahah.vue 里面的 props: {}, 删除就不会打印两次了，这个估计是 VUE 设计上的问题

还有一点可以确定，第二次渲染是 子组件开始渲染完成之后 打印的，也就是说如果子组件有props的情况下这里会被渲染两次

这应该是VUE设计上的缺陷，嘿嘿，如果找找VUE源码能改掉这个问题，那就厉害了

[wuguojun1006]

我试了一下 如果你把 hahah.vue 里面的 props: {}, 删除就不会打印两次了，这个估计是 VUE 设计上的问题

还有一点可以确定，第二次渲染是 子组件开始渲染完成之后 打印的，也就是说如果子组件有props的情况下这里会被渲染两次

这应该是VUE设计上的缺陷，嘿嘿，如果找找VUE源码能改掉这个问题，那就厉害了

用vue-cli新建项目的话不会有这个问题的

[mayunhai]

暂时 定位到 src\components\Breadcrumb\index.vue 中this.$route.matched.filter.... 触发了data变动，重新渲染了 dom 导致执行两次

[mayunhai]

src\components\Breadcrumb\index.vue 两个 filter 方法合并改写一下就好了，晚上回家传代码 @wuguojun1006

[mayunhai]

#2617 代码已提交

[PanJiaChen]

其实主要是声明周期的问题。

created() {
    this.$nextTick(() => {
      this.getBreadcrumb()
    })
  }

或者

 mounted() {
    this.getBreadcrumb()
  }

就不会有这个问题了。