Vue Property Decorator Vue裝飾器用法 Vue 裝飾器與原生寫法對比

 

@prop  裝飾器

import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
  @Prop(Number) readonly propA: number | undefined //propA屬性是Number類型,readonly 表示只讀,number|undefined表示Prop的值可能是number或者undefined
  @Prop({ default: 'default value' }) readonly propB!: string // default:'' 如果沒有傳參 默認的值  !感嘆號表示一定有值 
  @Prop([String, Boolean]) readonly propC: string | boolean | undefined  //[String,Boolean] 表示 propC的類型可能是string,boolean
　　　　
}
　　 // @Prop({ required: true, type: String, default: "" }) label?: string   // required:true 表示一定有值 跟 ! 一樣

相當於

export default {
  props: {
    propA: {
      type: Number,
    },
    propB: {
      default: 'default value',
    },
    propC: {
      type: [String, Boolean],
    },
  },
}

 @PropSync 裝飾器

import { Vue, Component, PropSync } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {

// 'name' 是定義的Prop屬性  {type:String}是表示 'name'的值是字符串類型 
//　syncedName 表示一個計算屬性,get就是獲得'name'的值，set 就是修改name的值，然后拋出update:name事件，把value作為參數傳入,就能在父組件更新name變量的值

@PropSync('name', { type: String }) syncedName!: string 
    
}

相當於

export default {
  props: {
    name: {
      type: String,
    },
  },
  computed: {
    syncedName: {
      get() {
        return this.name
      },
      set(value) {
        this.$emit('update:name', value)
      },
    },
  },
}

 @Model 裝飾器 

import { Vue, Component, Model } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
　//'change' 表示如果修改了checked的值，那么就拋出change事件, 傳入的參數就是修改之后的值
  @Model('change', { type: Boolean }) readonly checked!: boolean
}

相當於

 

export default {
  model: {
    prop: 'checked',
    event: 'change',
  },
  props: {
    checked: {
      type: Boolean,
    },
  },
}

 

 @Watch 裝飾器

import { Vue, Component, Watch } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
  @Watch('child')
  onChildChanged(val: string, oldVal: string) {}

  @Watch('person', { immediate: true, deep: true })
  onPersonChanged1(val: Person, oldVal: Person) {}

  @Watch('person')
  onPersonChanged2(val: Person, oldVal: Person) {}
}

相當於

export default {
  watch: {
    child: [
      {
        handler: 'onChildChanged',
        immediate: false,
        deep: false,
      },
    ],
    person: [
      {
        handler: 'onPersonChanged1',
        immediate: true,
        deep: true,
      },
      {
        handler: 'onPersonChanged2',
        immediate: false,
        deep: false,
      },
    ],
  },
  methods: {
    onChildChanged(val, oldVal) {},
    onPersonChanged1(val, oldVal) {},
    onPersonChanged2(val, oldVal) {},
  },
}