Vue頁面上實時顯示當前時間，每秒更新

有時候我們需要在頁面上添加一個類似時鍾的東西來實時顯示當前時間，這個時候我們可以利用定時器來完成這個功能

<div id="app">
    {{date}}
</div>

<script>
export default {
  data() {
    return {
      date: new Date()
    };
  },
  mounted() {
    let _this = this; // 聲明一個變量指向Vue實例this，保證作用域一致
    this.timer = setInterval(() => {
      _this.date = new Date(); // 修改數據date
    }, 1000)
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue實例銷毀前，清除我們的定時器
    }
  }
};
</script>