Vue выходит на пит-трип (2) — отслеживание обновления и закрытия страницы

Vue.js

Когда я работал над проектом, у меня было требование отправить изменение количества товаров в корзине на сервер, когда я покидал (переходил или закрывал) страницу корзины или обновлял страницу корзины.

Поместите отправленную асинхронную операцию в функцию ловушки beforeDestroy.

beforeDestroy() {
  console.log('销毁组件'）
  this.finalCart()
},

Однако было обнаружено, что beforeDestroy может отслеживать только переходы между страницами, но не может отслеживать обновления страниц и закрытие вкладок.

Так что все еще используйтеonbeforeunloadсобытие.

Кстати, обзор некоторых событий загрузки и выгрузки в JavaScript:

  • Выполнять только при загрузке страницыonloadсобытие.
  • Когда страница закрыта, сначалаonbeforeunloadсобытие, опять жеonunloadсобытие.
  • Выполнять первым при обновлении страницыonbeforeunloadсобытие, тоonunloadсобытие, последнее onload событие.


Мониторинг обновления страницы и закрытие в Vue

1. Определите метод события в методах:

methods: {
  beforeunloadFn(e) {
    console.log('刷新或关闭')
    // ...
  }
}

2. Привязать события к созданным или смонтированным хукам жизненного цикла

created() {
  window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
}

3. Выгрузить событие в уничтоженном хуке

destroyed() {
  window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
}

Проверено, что можно отслеживать обновление и закрытие страницы.


Возвращаясь к своему собственному проекту, я могу использоватьonbeforeunloadсобытия иbeforeDestroyКомбинация функций крюка:

created() {
  this.initCart()
  window.addEventListener('beforeunload', this.updateHandler)
},
beforeDestroy() {
  this.finalCart() // 提交购物车的异步操作},
destroyed() {
  window.removeEventListener('beforeunload', this.updateHandler)},
methods: {
  updateHandler() {
    this.finalCart()
  },
  finalCart() {
    // ...
  }
}


Категории