javascript - Vue 刷新頁面時會觸發事件嗎

Question

剛學習vue不久，按照網上的demo做了一個簡單的note，使用localstorage做本地存儲，然後我想在刷新頁面或離開頁面的調用localstorage方法，請問這樣做能實現嗎？如果可以，要怎麼做？謝謝回答，感激不盡！

Answer 1

一般使用 Vue 開發時，不需要觸摸 window.onload 這類 DOM 相關的 API，而是使用 Vue 封裝的元件生命週期鉤子：

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

Answer 2

用生命週期函數，依需求選擇用哪一個，參考 https://cn.vuejs.org/v2/api/#選項-生命週期鉤子

Answer 3

使用localstorage做本地存儲，然後我想在刷新頁面或離開頁面的調用localstorage方法

1、頁面刷新使用localstorage，也就是當vue被實例化之後有以下幾個可以供你使用：

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

這幾個都是可以在頁面刷新的時候操作本地儲存。
註： 其實本地儲存也可以不寫在vue實例當中，本質上與vue無關,你只是在當頁面刷新的時候為了執行一段js而已

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、頁面​​關閉與vue的生命週期無關，也不存在銷毀一說，因此關閉頁面沒有方法讓你使用操作localStorage，這一點跟樓上幾位說的不一樣。