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

Question

我有一个表，可能会填充任意数量的行(例如 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但我不确定应该使用哪个钩子(Hook)。我的 applyOverlay() 是普通的 JavaScript，不依赖于 Vue。

编辑:我试过使用mounted、beforeMount、created 和beforeCreate，但都没有工作了。我想知道它是否与 jQuery 有任何关系。但是，我的 jQuery 会在加载 Vue 之前先加载。

Answer 1

applyOverlay() 函数可以添加到 Vue 对象的 methods 属性中。然后使用像 beforeMount 这样的生命周期钩子(Hook)调用该方法。为了更全面地解释可用的钩子(Hook)，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>