vue的beforecreated中可以访问props吗？

Question

在vue文档中，“beforeCreate”部分，我读到了以下内容：

在初始化实例时、在 props 解析之后、在处理其他选项（例如 data() 或计算）之前立即调用。

这是否意味着我可以在 beforeCreate 挂钩中获取 props ？如果是这样，我怎样才能得到它？ 在我的子组件中，我尝试像这样获取父组件传递的消息，但失败了。

export default {
  name: 'Child',
  props: ['message'],
  beforeCreate() {
    console.log(this.message)
  }
}

Answer 1

请检查以下代码片段，看起来您的代码没问题：

const app = Vue.createApp({
  data() {
    return {
      msg: 'aaa',
    };
  },
})
app.component('Child', {
  template: `<div>{{ message }}</div>`,
  props: ['message'],
  beforeCreate() {
    console.log('before create: ', this.message)
  }
})
app.mount('#demo')

<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>
<div id="demo">
  <child :message="msg"></child>
</div>

Answer 2

如果您使用的是 Vue2，您可能无法直接通过 this[key] 访问 props。使用 this.$options.propsData[key] 代替：

beforeCreate() {
    console.log('before create: ', this.$options.propsData.myProp)
}