javascript - Vue déclenchera-t-il un événement lors de l'actualisation de la page?

Question

Je viens d'apprendre Vue et j'ai fait une note simple selon la démo en ligne, en utilisant localstorage pour le stockage local. Ensuite, je souhaite appeler la méthode localstorage lors de l'actualisation de la page ou de la sortie de la page. Si c'est le cas, comment? Merci pour votre réponse, je l'apprécie!

Answer 1

Généralement, lors du développement avec Vue, vous n'avez pas besoin de toucher window.onload à ces API liées au DOM. Utilisez plutôt le hook de cycle de vie des composants encapsulé par Vue :

.

export default {
  // ...
  // 在组件初始化时调用，可以简单理解为页面加载时
  created () {
    // 存在 localStorage 的缓存内容
    if (localStorage.data) {
      this.myData = JSON.parse(localStorage.data)
    }
    else {
      // 页面无缓存内容时，初始化数据并写入缓存
      this.initData()
    }
  }
  // 在组件销毁前调用，但这并不能监听到页面退出的事件
  beforeDestory () {
    // 在此同样可对 localStorage 做一些处理
  }
}

Answer 2

Utilisez les fonctions de cycle de vie, choisissez laquelle utiliser en fonction de vos besoins, reportez-vous à https://cn.vuejs.org/v2/api/#Options-Life Cycle Hook

Answer 3

Utilisez localstorage pour le stockage local, puis je souhaite appeler la méthode localstorage lors de l'actualisation de la page ou de la sortie de la page

1. Utilisez le stockage local pour l'actualisation de la page, c'est-à-dire qu'une fois Vue instanciée, les éléments suivants sont à votre disposition :

export default {
    beforecreate() {
        //  创建前状态
    }
    created () {
        //  创建完毕状态
    }
    beforeMount(){
        //  挂载前状态
    }
    mounted(){
        //  挂载结束状态
    }
}

Ceux-ci peuvent exploiter le stockage local lorsque la page est actualisée.
Remarque : en fait, le stockage local n'a pas besoin d'être écrit dans l'instance de vue. Cela n'a essentiellement rien à voir avec vue. Vous exécutez simplement un morceau de js lorsque la page est actualisée.

main.js

/* 项目启动 */
import Vue from 'vue'
import App from './App'
import router from './router'

/****************************
 写这里也不是不可以
****************************/
new Vue({
  router: router,
  render: h => h(App)
  // components: { firstcomponent, secondcomponent }
}).$mount('#app')

2. La fermeture de la page n'a rien à voir avec le cycle de vie de vue, et il n'y a pas de destruction. Par conséquent, vous n'avez aucun moyen d'utiliser localStorage lors de la fermeture de la page. C'est différent de ce que les personnes ci-dessus ont dit.