vue ts框架Vue Property Decorator-原创手记-慕课网

前言

vue支持ts写法呢,我们需要用到 vue-property-decorator
，这个库完全依赖于 vue-class-component

语法

@Watch

属性参数：@Watch(path: string, options: WatchOptions = {})

参数说明：@Watch 装饰器接收两个参数：

path: string 被侦听的属性名；
options?: WatchOptions={} options可以包含两个属性：
immediate?:boolean 侦听开始之后是否立即调用该回调函数；
deep?:boolean 被侦听的对象的属性被改变时，是否调用该回调函数；
我们可以利用vue-property-decorator提供的@Watch装饰器来替换Vue中的watch属性,以此来监听值的变化.

在Vue中监听器的使用如下:

export default{
    watch: {
        'child': this.onChangeValue, // 这种写法默认 `immediate`和`deep`为`false`
        'person': {
            handler: 'onChangeValue',
            immediate: true,
            deep: true
        }
    },
    methods: {
        onChangeValue(newVal, oldVal){
            // todo...
        }
    }
}

通过使用如下方式进行替换

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

@Watch('child')
onChangeValue(newVal: string, oldVal: string){
    // todo...
}

@Watch('person', {immediate: true, deep: true})
onChangeValue(newVal: Person, oldVal: Person){
    // todo...
}