vue中预渲染mounted执行了两次
时间: 2023-05-10 08:01:36 浏览: 597
vue mounted 调用两次的完美解决办法
在 Vue 中,当组件被渲染到页面上时,会依次执行 beforeCreate、created、beforeMount、mounted 四个生命周期函数。其中,mounted 表示组件已经被挂载到页面上。
如果一个组件中的 mounted 函数执行了两次,可能有以下原因:
1. 组件被异步加载,导致组件的 mounted 函数被多次执行。这时可以添加一个判断条件,防止重复执行 mounted 函数。
2. 在组件内部使用了 v-if 或 v-show 等条件渲染指令,导致组件在渲染后又被重新渲染了一次。这时可以把相关的代码移动到 created 函数里面执行。
3. 组件引用了其他组件,同时又在父组件中使用了 keep-alive 指令,导致组件被缓存,再次进入页面时会触发一次 mounted 函数。这时可以在 activated 函数里面执行需要执行的代码。
总之,如果组件的 mounted 函数执行了两次,需要仔细查找原因,分析代码逻辑,并且根据不同情况采取不同的解决方法。
阅读全文