在 Vue.js2 中使用哪个生命周期钩子在页面加载时调用函数？

Posted 2023-02-22

【中文标题】在 Vue.js2 中使用哪个生命周期钩子在页面加载时调用函数？

【英文标题】：Which lifecycle hook to use in Vue.js2 to call function on page load?

【发布时间】：2017-08-14 18:56:49

【问题描述】：

我有一个可能填充任意行数（例如 3、3800 等）的表，因此在填充数据之前，我想应用一个覆盖（我已经有一个函数 applyOverlay() 用于那）。这是我的 html：

<table id="table" class="datatable" style="width:100%">
    <thead>
        /* table header */
    </thead>
    <tbody>
        <tr v-for="(item, index) in items" item="item">
            <td v-text="item.Name"></td>
            /* more <td> */
        </tr>
    </tbody>
</table>

这是我的 javascript：

var tblItems = [ /* items */ ];

var app = new Vue( 
    el: '#table',
    data: 
        items: tblItems
    
);

我尝试使用 jQuery 的 $(document).ready，但我看到页面已加载（尚未填充表格），并且直到几秒钟后才应用我的覆盖（并且表格已填充）。我希望在 html 加载完成后立即应用覆盖。我读到了他们的lifecycle，但我不确定我应该使用哪个钩子。我的 applyOverlay() 是原生 JavaScript，不依赖于 Vue。

编辑：我尝试过使用mounted、beforeMount、created 和beforeCreate，但没有任何效果。我想知道它是否与jQuery有关。但是，我的 jQuery 在加载 Vue 之前会先加载。

【问题讨论】：

How to call a vue.js function on page load的可能重复

【参考方案1】：

我认为您正在寻找“已安装”：

var tblItems = [ /* items */ ];

var app = new Vue( 
    el: '#table',
    data: 
        items: tblItems
    ,
    mounted: function() 
        //init table here because table template is available
    
);

【讨论】：

mounted 对我不起作用，叠加层仍然应用得太晚。

【参考方案2】：

您可以使用created、mounted 生命周期钩子或beforeMount 钩子，如下所示：

var app = new Vue( 
    el: '#table',
    data: 
        items: tblItems
    ,
    mounted () 
      // Your code needed to be executed on page load
    
);

【讨论】：

所以在这种情况下我不会使用created？

@Darren 你可以使用created...see this list for a nice summary of the hooks

created 仍然无法正常工作，产生的结果与我的问题中描述的相同。

【参考方案3】：

applyOverlay() 函数可以添加到 Vue 对象的 methods 属性中。然后使用像beforeMount 这样的生命周期钩子来调用该方法。对于可用钩子的更详尽解释，Saurabh 有一个很好的列表here。

var app = new Vue( 
    el: '#table',
    data: 
        items: tblItems
    ,
    methods: 
        applyOverlay: function() 
             //code for applying overlay
        
    
    beforeMount: function() 
        this.applyOverlay();
    
);

请参见下面的演示。该示例使用HTML class bindings 添加叠加层。

var tblItems = [ /* items */ ];

var app = new Vue(
  el: '#table',
  data: 
    items: tblItems,
    status: '',
    overlay: false
  ,
  beforeMount() 
    this.applyOverlay();
    setTimeout(this.setUnits, 1500);
  ,
  methods: 
    applyOverlay: function() 
      this.overlay = true;
      this.status = "overlay applied";
    ,
    setUnits: function() 
      this.overlay = false;
      this.items = [
        Name: "A",
        status: "done"
      , 
        Name: "B",
        status: "in transit"
      ];
      this.status = 'set items, overlay removed';
    
  
);

.datatable 
  text-align: center;


tfoot 
  font-size: small;


.overlay 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  /*dim the background*/
  background-color: rgba(0, 0, 0, 0.5);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
<table id="table" class="datatable" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(item, index) in items" item="item">
      <td v-text="item.Name"></td>
      <td v-text="item.status"></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Status:  status 
        <div v-bind:class="overlay: overlay"></div>
      </td>
    </tr>
  </tfoot>
</table>