Vue项目中props传值、data数据初始化、watch（immediate: true）和常用钩子之间先后关系

代码：

<script>
export default {
  watch: {
    c: {
      handler () {
        console.log('cjy-----------------watch-' + this.b)
        console.log('cjy-----------------watch')
      },
      immediate: true
    }
  },
  props: {
    a: {
      type: String,
      default: () => '',
      required: true,
      validator: (value) => {
        console.log('cjy-----------------props-' + this.b)
        console.log('cjy-----------------props')
        return value
      }
    }
  },
  data () {
    return {
      b: 'cjy-son',
      c: 'cjy'
    }
  },

  beforeCreate () {
    console.log('cjy-----------------beforeCreate')
  },
  created () {
    console.log('cjy-----------------created')
  },
  beforeMount () {
    console.log('cjy-----------------beforeMount')
  },
  mounted () {
    console.log('cjy-----------------mounted')
  }
}
</script>

控制台输出结果：

结果：

先后顺序是：

beforeCreate  > props > data初始化  >  watch > created > beforeMount > mounted

自测过很多情况，都是这个顺序，如有不对或遗漏，请指正。