vue中使用vue-property-decorator

一、前言

Vue.js 是一个非常受欢迎的前端框架,它能够快速构建交互性强的单页面应用。而 vue-property-decorator 是一个用于 Vue.js 的装饰器库,可以帮助我们更方便地编写 Vue.js 组件。下面来详细讲解 vue-property-decorator 的用法。

vue-class-component 是 vue 的官方库,作用是用类的方式编写组件,这种编写方式可以让 .vue 文件的 js 结构更扁平化,并使 vue 组件可以使用继承、混入等高级特性。

目前 2.x 跟 TS 的整合,通常需要基于 vue-class-component 来用基于 class 的组件书写方式

vue英文官网推荐了一个叫vue-class-component的包,可以以class的模式写vue组件。vue-class-component(以下简称Component)带来了很多便利:
官方文档:https://class-component.vuejs.org/

vue-property-decorator是社区出的
官网 https://www.npmjs.com/package/vue-property-decorator
vue-property-decorator使我们能在vue组件中写TypeScript语法

vue-property-decorator深度依赖了vue-class-component拓展出了更多操作符 @Prop @Model @Watch @Provide @Inject @Emit等
可以说是 vue-property-decorator是 vue-class-component的一个超集
正常开发的时候,你只需要使用vue-property-decorator中提供的操作符即可 不用再从vue-class-componen引入 vue、component

装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上。 装饰器使用 @expression这种形式,expression求值后必须为一个函数,它会在运行时被调用,被装饰的声明信息做为参数传入。

二、安装

1、原项目安装
npm i -S vue-class-component
npm i -S vue-property-decorator
2、使用 vue-cli 搭建新项目

vue create hello-world
选择 “Manually select features” 来手动选择特性,
勾选上 TypeScript(因为要使用装饰器语法)
勾选 “Use class-style component syntax?”

三、使用

1、 基本写法

template和css的写法不变,只是script内的写法需要注意


lang=“ts”:script声明当前语言是ts
@Component:注明此类为一个vue组件
App 组件名称
export default class Test extends Vue: export当前组件类是继承vue的

2、@component

@Component({})可以声明components、filter、directives等未提供装饰器的vue选项,也可以声明computed、watch、路由守卫函数(beforeRouteEnter、beforeRouteLeave)等

即使没有组件也不能省略@Component,否则会报错。




3、Data属性

data属性初始化可以被声明为类的属性。




4、Methods属性

组件方法可以直接声明为类的原型方法:




5、Computed 计算属性

计算属性可以声明为类属性getter/setter:
对于Vue中的计算属性,我们只需要将该计算属性名定义为一个函数,并在函数前加上get关键字即可




6、@Watch

@Watch使用非常简单,接受第一个参数为要监听的属性名 第二个属性为可选对象
{immediate?: boolean, deep?: boolean}第一个表示监听开始后是否立即调用回调函数,第二个表示监听的属性变化时是否调用回调函数




7、@Prop

子组件接收父组件传参
@Prop接受一个参数可以是类型变量或者对象或者数组.@Prop接受的类型比如Number是JavaScript的类型,之后定义的属性类型则是TypeScript的类型
// 高阶函数接受参数,兼容以下写法

@Prop(String) name!: string | undefined;
@Prop([String, Number]) count!: string | number;
@Prop({type: Number, default: 0, (required、validator)}) age!: number;
@Prop() private name!: string;

//父组件HomeView.vue



//子组件HelloWorld.vue



8、@Emit

@Emit会将回调函数的返回值作为第二个参数,如果返回值为一个Promise对象,emit会在Promise-resolved后触发

@Emit(‘del’) private delEmit(e: MouseEvent){}
@Emit()//省略参数将使用回调函数名,转化为中划线@add-data
addData(data: any){return ‘’;}//如果此处不return,则使用函数参数data

//父组件HomeView.vue



//子组件HelloWorld.vue



9、Mixins

Vue类组件提供了mixins辅助功能,以类样式方式使用mixins。通过使用mixins帮助程序,TypeScript可以推断混合类型并在组件类型上继承它们。

注意:所有mixin必须声明为类组件。

// mixins.ts
import { Vue, Component } from 'vue-property-decorator';

//定义vue/type/vue模块
declare module 'vue/types/vue' {
    interface Vue {
        value: string;
    }
}

@Component
export default class myMixins extends Vue {
    // 定义的变量
    value: string = 'Hello'
}
//页面HelloWorld.vue
import { Vue, Component, Prop } from 'vue-property-decorator';
import myMixins from './mixins';

@Component({
    //混入
    mixins: [myMixins]
})
export default class myComponent extends Vue {
    // 生命周期
    created() {
        console.log(this.value) // => Hello
    }
}

总结

  1. methods,钩子都可以直接写作class的方法
  2. computed属性可以直接通过get来获得
  3. 初始化data可以声明为class的属性
  4. 其他的都可以放到Component装饰器里

你可能感兴趣的:(vue,ts,vue.js,前端,javascript)