詳解:爲什麼在keep-alive組件中使用computed計算屬性數據沒有變更?

第一步:computed在生命週期的哪個階段執行?

(1)在new Vue()的時候,vue\src\core\instance\index.js裏面的_init()初始化各個功能

function Vue (options) {
if (process.env.NODE_ENV !== 'production' &&
  !(this instanceof Vue)
) {
  warn('Vue is a constructor and should be called with the `new` keyword')
}
this._init(options) //初始化各個功能
}

(2)在_init()中有這樣的一個執行順序:其中initState()是在beforeCreatecreated之間

  initLifecycle(vm)
  initEvents(vm)
  initRender(vm)
  callHook(vm, 'beforeCreate')
  initInjections(vm) // resolve injections before data/props
  initState(vm) //初始化
  initProvide(vm) // resolve provide after data/props
  callHook(vm, 'created') 

(3)在initState()做了這些事情:

if (opts.props) initProps(vm, opts.props)//初始化Props
if (opts.methods) initMethods(vm, opts.methods)//初始化methods
if (opts.data) {
  initData(vm)} else {
  observe(vm._data = {}, true /* asRootData */)}//初始化data
if (opts.computed) initComputed(vm, opts.computed)//初始化computed

(4)所以Propsmethods,datacomputed的初始化都是在beforeCreatedcreated之間完成的。

第二步:keep-alive組件不會執行created鉤子函數

在使用vue-router時有時需要使用<keep-alive></keep-alive>來緩存組件狀態,頁面在刷新的時候不會觸發created而是會觸發activated。這個時候created鉤子不會被重複調用了,也就不會執行computed方法。

第三步:

如果我們的子組件需要在每次加載的時候進行某些操作,比如更新某個數據,可以使用activated鉤子觸發。activated是在keep-alive組件激活的時候調用的。

順帶附一篇介紹computed的文章

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章