且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何在页面加载时调用vue.js函数

更新时间:2023-12-05 17:41:46

您可以在 beforeMount 中调用此功能Vue组件的一部分:如下所示:

You can call this function in beforeMount section of a Vue component: like following:

 ....
 methods:{
     getUnits: function() {...}
 },
 beforeMount(){
    this.getUnits()
 },
 ......

工作小提琴: https://jsfiddle.net/q83bnLrx/1/

Vue提供不同的生命周期钩子:

There are different lifecycle hooks Vue provide:

我列出的几个是:


  1. beforeCreate :刚刚初始化实例后同步调用,数据阻塞之前ervation和event / watcher setup。

  2. 创建:在创建实例后同步调用。在此阶段,实例已完成处理选项,这意味着已设置以下内容:数据观察,计算属性,方法,监视/事件回调。但是,安装阶段尚未开始,$ el属性尚不可用。

  3. beforeMount :在安装开始之前调用:渲染函数即将首次调用。

  4. 已安装:刚安装实例后调用,其中el由新创建的 vm替换。$ el

  5. beforeUpdate :在重新呈现和修补虚拟DOM之前调用数据。

  6. 更新:在数据更改后调用导致虚拟DOM重新渲染和修补。

  1. beforeCreate: Called synchronously after the instance has just been initialized, before data observation and event/watcher setup.
  2. created: Called synchronously after the instance is created. At this stage, the instance has finished processing the options which means the following have been set up: data observation, computed properties, methods, watch/event callbacks. However, the mounting phase has not been started, and the $el property will not be available yet.
  3. beforeMount: Called right before the mounting begins: the render function is about to be called for the first time.
  4. mounted: Called after the instance has just been mounted where el is replaced by the newly created vm.$el.
  5. beforeUpdate: Called when the data changes, before the virtual DOM is re-rendered and patched.
  6. updated: Called after a data change causes the virtual DOM to be re-rendered and patched.

您可以查看此处的完整列表。

You can have a look at complete list here.

您可以选择最适合您的挂钩,并将其挂钩以调用您的功能,如上面提供的示例代码。

You can choose which hook is most suitable to you and hook it to call you function like the sample code provided above.