vue+ts项目中使用 ts的注意点

vue项目中涉及ts常使用两个插件：

vue-class-component：这个是官方自带的；

vue-property-component：基于vue-class-component进行扩展，丰富了功能，增加了诸如 @Component @Watch @Prop @Emit @Inject等

使用vue-property-component只有默认的几个生命周期，created/mouted等，如果要使用路由生命周期，需要使用提供的方法registerHooks单独注册

 import { Component } from 'vue-property-decorator';
 Component.registerHooks(['beforeRouterEnter','beforeRouteLeave'])

@Component，可以声明components、filters、directives、mixins等等

@Component({
    name:'',
    components:{
        component1,
    },
    filters: {
    
    },
    directives:{
    test(el:HTMLElement,binding) {},
    },
    mixins:[]
})

@Watch 监听数据变化

 public num:number = 10;
 @Watch('num',{immediate:true,deep:true})
   onChange(val,oldVal){
       this.dealNumber(val);
   }

计算属性的使用 通过get来声明是计算属性

get msg(){
       return 'message' + this.num;
   }
   
   get count(){
       return function(num:number){
           return num+3;
       }
   }

@Prop 接收父组件传递的参数

@Prop() propA: string
@Prop({
    type:Number,
    default: 100,
    required: false
})
propB?:number

@PropSync 可以实现数据同步，子组件修改数据会同步到父组件,需要父组件中使用.sync

父组件
<Child showName.sync='showName'></Child>
子组件

@PropSync('showName',{type:String}) childName!:string;
changeName(val):vold {
    this.childName = val;
}

@Emit 子组件给父组件传递参数

子组件
@Emit()
returnValue(params){
    return params;
}

changeValue(val) {
    this.returnValue(val);
}
父组件
<Child @return-value='getValue'></Child>

@Ref

   @Ref() readyonly test!:Test 引入的组件ref
   @Ref('img') readonly img!:HTMLElement  普通html 的ref
   
   console.log(this.test) 
   console.log(this.img)

@Provide/@Inject 父组件向子孙组件 传递数据，默认是不响应的

componentA中

@Provide() foo! = 'foo'
@Provide('bar') bar = 'bar'

componentB中

@Inject() readonly foo!:string;
@Inject('bar') bar:string;

特别注意：如果需要实现响应式，有另外两个修饰器 @ProvideReactive() 和 @InjectReactive(), 用法类似

完整使用案例

<template>
<div>
    {{msg}}
    {{count(5)}}
    <img ref='img'>
    <Test ref='test'>
</div>
</template>
<script lang='ts'>
   import { Component, Vue } from 'vue-porperty-decorator';
   Component.registerHooks(['beforeRouterEnter','beforeRouteLeave']);
   import Child from './child.vue';
   import Test from './test.vue';
   
   @Component({
       name:'',
       components:{
          Child,
        },
       filters: {
    
        },
       directives:{
        test(el:HTMLElement,binding) {},
        },
       mixins:[]
   })
   export default class App extends Vue {
       created():void {
       }
       name:string = 'kongkong';
       age:number = 18;
       add(){}
       get msg() {
           return 'message'+ this.age;
       }
       get count(){
           return function(num:number){
               return num+3;
           }
       }
   }
</script>