vue为什么created会走两次

worktile 其他 505

回复

共3条回复 我来回复
  • worktile的头像
    worktile
    Worktile官方账号
    评论

    Vue的created生命周期钩子函数在Vue实例被创建后调用,但是有时候我们会发现created函数会被调用两次,这是因为Vue的创建过程是分为两个阶段的:初始化阶段和挂载阶段。

    第一次调用created函数发生在初始化阶段。在初始化阶段,Vue会完成一些初始化的工作,包括数据观测、编译模板、实例方法、生命周期函数等的初始化。created函数在这个阶段是被调用的,但是此时组件还没有被挂载到DOM树上。

    第二次调用created函数发生在挂载阶段。在挂载阶段,Vue会将组件挂载到DOM树上,并执行一些DOM相关的操作。在这个阶段,Vue会调用mounted函数,表示组件已经挂载完成。但是在Vue 3以后的版本中,由于引入了异步渲染机制,即在mounted函数调用之前,Vue会先进行一次“预渲染”,即再次调用created函数,用于收集组件的依赖关系。

    所以,当我们发现created函数被调用两次时,其实是在初始化阶段和挂载阶段分别调用的。如果我们想要避免created函数被调用两次,可以在created函数中添加判断条件,只在初始化阶段的调用执行某些逻辑。例如:

    created() {
      if (!this.$vnode) {
        // 只在初始化阶段执行的逻辑
      }
    }
    

    总之,created函数被调用两次是Vue的正常行为,不需要过于担心,只需要在编写代码时注意初始化阶段和挂载阶段的差异即可。

    2年前 0条评论
  • fiy的头像
    fiy
    Worktile&PingCode市场小伙伴
    评论

    在Vue中,created钩子函数是Vue实例被创建后立即调用的一个生命周期钩子函数。通常情况下,created只会执行一次。但是有时候会出现created被调用两次的情况,以下是可能会导致此问题的几种原因:

    1. 初始化Vue实例两次:最常见的原因是在代码中多次实例化Vue对象,每次实例化都会触发created钩子函数。检查代码,确保只有一个Vue实例被创建。

    2. 使用Vue.extend创建子组件:使用Vue.extend创建的子组件,每次被使用时都会触发created钩子函数。如果在父组件中多次使用同一个子组件,就会导致created被调用多次。此时,可以考虑将子组件改为全局组件或者使用mixin来解决。

    3. 使用keep-alive组件:keep-alive组件是Vue提供的一个用于缓存组件的容器组件。当组件被keep-alive包裹时,组件的生命周期钩子函数会发生变化。常见的是,在组件被缓存后,再次显示时,created钩子函数会再次被调用。检查代码,确保在需要的地方使用keep-alive组件。

    4. 异步加载组件:如果在created钩子函数中动态加载了组件,那么被加载的组件的created钩子函数也会被调用。这可能会导致created钩子函数被调用多次的情况。检查代码,确保在适当的时机动态加载组件。

    5. 有条件地执行created钩子函数:在某些情况下,created钩子函数可能会被条件语句包裹,而当条件满足时,created钩子函数会被多次调用。检查代码,确保created钩子函数在符合预期的时机被调用。

    总结起来,上述几种情况可能导致created钩子函数被调用两次。解决这个问题的关键是仔细检查代码并找出为什么会出现多次调用的原因。

    2年前 0条评论
  • 不及物动词的头像
    不及物动词
    这个人很懒,什么都没有留下~
    评论

    在Vue中,created钩子函数是组件实例被创建之后立即调用的函数。正常情况下,created钩子函数只会被调用一次。然而,有时候我们会遇到created钩子函数被调用两次的情况,这可能是由于以下几种原因引起的:

    1. 组件实例被多次使用:一个组件实例在不同的地方使用时,created钩子函数会被多次调用。例如,如果一个组件在父组件中使用了多次,那么created钩子函数会被调用与组件实例的使用次数相同的次数。

    2. 组件在路由切换时重新渲染:当使用Vue Router时,如果在不同的路由之间切换,组件会被销毁和重新创建。这会导致created钩子函数被调用两次。这是因为在路由切换时,旧的组件会被销毁,而新的组件会被创建,所以会有两次created钩子函数的调用。

    3. 组件被keep-alive包裹:当组件被keep-alive包裹时,组件实例会被缓存,而不是被销毁。当组件的缓存被重新激活时,created钩子函数会再次被调用。这种情况下,created钩子函数会被调用两次。

    为了解决created钩子函数被重复调用的问题,可以考虑以下解决方案:

    1. 检查组件实例的使用情况,确保组件只被使用一次。

    2. 如果在使用Vue Router时遇到了created钩子函数被调用两次的问题,可以通过使用beforeRouteUpdate钩子函数来解决。beforeRouteUpdate钩子函数在路由切换时会被调用,可以在这个钩子函数中处理组件的重置操作。

    3. 对于使用了keep-alive的组件,可以使用activated钩子函数来处理组件被重新激活时的逻辑。

    综上所述,created钩子函数被调用两次的情况通常是由于组件实例被多次使用、路由切换或者使用了keep-alive导致的。根据具体的情况,可以采取相应的解决方案来解决这个问题。

    2年前 0条评论
注册PingCode 在线客服
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部