Question

Vue 2，是否存在生命周期钩子，实际上是指＆＃34;完成渲染＆＃34;？我想在进入页面时加载一个加载屏幕，它会逐渐消失并在Vue完成加载所有内容后显示页面内容，但我已经尝试了大部分生命周期挂钩但不能正常工作。如果updated引用＆＃34;完成渲染＆＃34;我会尝试做的事情：

updated(){
  this.loaded()
},
methods:{
  loaded(){
    var vm = this;
    this.loading = false;
  }
}

如果没有这样的生命周期钩子，你建议我做什么呢？感谢

Answer 1

您正在寻找的方法可能是mounted()，当vue组件准备就绪时会触发此方法。您可以查看Vue生命周期文档here

所以你的Vue实例可能看起来像这样：

  var app = new Vue({
  el: '#app',

  /*
  * When the instance is loaded up
  */
  mounted: function () {
     this.loaded()
  }

  methods: {
    loaded: function () {
      var vm = this
      this.loading = false
    }
  }
})

Answer 2

要确保所有子组件都已安装，请使用vm.$nextTick - 比setTimeout更清晰：

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

来源：https://vuejs.org/v2/api/#Options-Lifecycle-Hooks

Answer 3

由于我无法找到特定的生命周期钩子或其他Vue指定的方法来挂钩所有内容完成呈现的点，我使用了基本的js代码以及使用代码加载所有内容所需的时间估计如下：

mounted(){
  this.loaded()
},
methods:{
  loaded(){
    var vm = this;
    setTimeout(function(){
      vm.loading = false
    }, 3000);
  }
}

希望有人能够在Vue身上表现出色，并提供一个新的答案来更准确地勾选它。

Answer 4

在模板/ html结束之前，你可以写：

{{ updated() }}

我希望它有所帮助。

Answer 5

实际上，您对问题的回答并非您最初提出的问题，Vue实例在不到一秒的时间内呈现，并且不可能仅使用任何钩子来创建用户友好的加载器。使用setTimeout函数的情况是唯一的解决方案。但是该组件在DOM中的准备时间早于3秒。

用于此目的的最佳方法是使用加载程序组件，在setTimeout挂钩中将有created，在此之后它将向父级发出事件。因此，在应用程序内部，您只需要导入加载程序组件本身，当事件触发时，更改内部布尔数据属性以呈现另一个组件v-if

Vue 2挂钩准备好了

5 个答案: