Vue中的computed计算属性在生命周期中的执行阶段

今天在做Vue练习时候,用到了computed计算属性get()和set()操作,由于是从子组件将值扔给父组件中计算属性的,我就想到created不是页面加载最初执行的钩子么?就有了computed和created谁先谁后的问题。然后查阅网上答案,思否的一篇解释的比较靠谱,特来总结下,方便再看。


结论:computed的初始化是在beforeCreatedcreated之间完成的

分析:

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之间完成的。

5.详细讨论看连接:https://segmentfault.com/q/1010000010364198

猜你喜欢

转载自blog.csdn.net/qq_42539194/article/details/112758839