javascript - Adakah Vue akan mencetuskan acara apabila memuat semula halaman?

Question

Saya baru belajar Vue dan membuat nota ringkas mengikut demo dalam talian, menggunakan storan setempat untuk storan setempat Kemudian saya ingin memanggil kaedah storan setempat apabila menyegarkan halaman atau meninggalkan halaman Adakah ini boleh dicapai? Jika ya, bagaimana? Terima kasih atas jawapan anda, saya menghargainya!

Answer 1

Secara amnya, apabila membangun dengan Vue, anda tidak perlu menyentuh window.onload API berkaitan DOM seperti itu, sebaliknya, gunakan cangkuk kitaran hayat komponen yang dikapsulkan oleh Vue:

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

Answer 2

Gunakan fungsi kitaran hayat, pilih yang mana satu untuk digunakan mengikut keperluan anda, rujuk https://cn.vuejs.org/v2/api/#Options-Life Cycle Hook

Answer 3

Gunakan storan setempat untuk storan setempat, dan kemudian saya ingin memanggil kaedah storan setempat apabila memuat semula halaman atau meninggalkan halaman

1 Gunakan storan setempat untuk menyegarkan halaman, iaitu, selepas Vue dibuat, perkara berikut tersedia untuk anda gunakan:

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

Ini boleh mengendalikan storan tempatan apabila halaman dimuat semula.
Nota: Sebenarnya, storan tempatan tidak perlu ditulis dalam contoh vue pada asasnya ia tidak ada kaitan dengan vue Anda hanya melaksanakan sekeping js apabila halaman dimuat semula

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. .