Vue / 在beforeCreate 階段透過this.$options.propsData抓取prop

vue vue生命週期 beforecreate $options

neverend327 2022-07-28 21:29:23 ‧ 768 瀏覽

分享至

有一些關於beforeCreate和this.$options的問題，如果有人知道請告訴我，謝謝

假設有一個叫count的prop
為什麼在beforeCreate不能直接抓取count，但透過this.$options.propsData.count卻可以?

<!-- child component in parent component -->

<Card :count="33" :data="data"></Card>

<!-- props of child components -->
@Prop() count!:number;

<!-- beforeCreate hook of child component -->

beforeCreate(): void {
  console.log(this.$options);  // 看附圖
  console.log(this.$options.propsData.count);  // 33
}

Vue - $options提到$options可以用於抓取自定義的option

可是我沒有定義propsData，上圖的propsData究竟是哪來的???

下方關於beforeCreate句子的"after props resolution"是甚麼意思?整句又是甚麼意思?

Called immediately when the instance is initialized, after props resolution, before processing other options such as data() or computed

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

bendwarn

iT邦新手 5 級 ‧ 2022-07-29 03:58:38

最佳解答

$options 是定義 component 時用到的那些參數，如 data, computed 之類。
使用 vue 底層的函數建立 component 的話 prop 就是放在 propsData，介面就是這麼定。
其實文件 Lifecycle Diagram 已經解答你的問題，renderer 遇到 component 呼叫，就得拿著呼叫時傳進來的值，到定義 component 的地方準備製造，這時 prop 當然已經解析完，因為傳值幾乎不用處理，但又還沒建立，因此還不是 component 屬性，要在下一步執行 option api 其他函數後才行。