vue各階段資料可使用情況：data，prop，watch，computed

export default {
  props: ["article"],
  data() {
    return {
      like: true,
      title: this.article.title,
      a:100
    };
  },
  computed: {
    summ: function () {
      return this.a * 2
    }
  },
  watch: {
    a: {
      handler:function (val, oldVal) {console.log('監聽', val, oldVal)},
      immediate: true
    }
  },
  beforeCreate() {
    console.log("beforecreate階段",this.$data,this.$props,this.summ)
  },
  created() {
    console.log("create階段",this.$data,this.$props,this.summ)
  },      

列印順序

了解計算屬性是一個怎樣的存在

将計算屬性換位summ之後：

export default {
  props: ["article"],
  data() {
    return {
      like: true,
      title: this.article.title,
      a:100
    };
  },
  computed: {
    summ: function () {
      return this.a * 2
    }
  },
  beforeCreate() {
    console.log("beforecreate階段",this.$data,this.$props,this.summ)
  },
  created() {
    console.log("create階段",this.$data,this.$props,this.summ)
  },
   watch: {
    summ: {
      handler:function (val, oldVal) {console.log('監聽', val, oldVal)},
      immediate: true
    }
  },