vuejs挂载生命周期未触发

Posted 2023-02-23

【中文标题】vuejs挂载生命周期未触发

【英文标题】：vuejs mounted lifecycle not triggering

【发布时间】：2018-04-28 13:54:06

【问题描述】：

在我下面的 App 组件中，mounted() 生命周期钩子没有被触发：

<template>
  <div>
    <div v-if='signedIn'>
        <router-view />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import Oidc from 'oidc-client'

Vue.use(Oidc)

export default 
  data () 
    return 
      user: null,
      signedIn: false,
      mgr: new Oidc.UserManager(...settings...)
    
  ,
  methods: 
    signIn () 
    ,
    signOut () 
    ,
    getUser () 
    ,
    mounted () 
      this.getUser()
    
  

</script>

我已经多次查看代码，不确定我缺少什么。 我在 main.js 文件中有这个：

new Vue(
  el: '#app',
  render: h => h(App),
  router
)

【参考方案1】：

mounted 位于 method 区域内，这意味着这是一个称为挂载的“函数”（如 getUser()），而不是在组件挂载时自动调用的 mounted。

你应该改变它：

methods: 
    signIn () 
    ,
    signOut () 
    ,
    getUser () 
       
  ,
mounted () 
      this.getUser()

然后它应该可以正常工作并被 Vue 自动调用为正常的生命周期方法。

希望对你有帮助！

【讨论】：

谢谢，不知道我是怎么错过的

@capiono，别担心，我自己做过几次！

@RameshPareek 您应该针对您的具体案例创建一个单独的问题并分享有关您的问题的一些信息。就像2年前回答的那样，这不是你的情况是正常的。谢谢！

是的，@JP.Aulet，:) 你是对的。 :) 但我会为未来的访客添加一些东西，我犯了一个愚蠢的错误。我实际上在同一个组件中创建了两个 mounted() 生命周期挂钩。因此，不知何故，没有生命周期挂钩起作用。当我删除重复的那个时，它就像一个魅力。