Vue Typescript 组件类属性初始化器的最佳实践

Posted 2023-02-23

【中文标题】Vue Typescript 组件类属性初始化器的最佳实践

【英文标题】：Best practice for Vue Typescript Component class property initializers

【发布时间】：2020-03-28 12:54:49

【问题描述】：

我看到很多关于 Vue + Typescript 组件类的相互冲突的文档。

在哪里定义属性？在@Component 注释中概述的here?正如@Prop 注释的实例属性所概述的here?

在哪里初始化定义的属性？在构造函数中？在字段级属性定义中？

是否有关于这些内容的明确、最新的参考，或最新的示例应用程序？

这是我现在拥有的：

<template>
    <div class='contacts'>

        <b-form @submit="search">
            <b-form-group>
                <b-form-input v-model="q"></b-form-input>
            </b-form-group>

            <b-button type="submit" variant="primary">Search</b-button>
        </b-form>

        <b-table :items='contacts'></b-table>
    </div>
</template>

<script lang="ts">

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

    @Component
    export default class Contacts extends Vue 
        constructor(options: any) 
            super(options);
            this.q = 'dummy data';
            this.contacts = [
                'id': 1,
                'first_name': 'Lukas',
                'last_name': 'Stigers',
                'email': null,
                'gender': 'Male',
                'phone': '776-878-7222'
            , 
                'id': 2,
                'first_name': 'Dari',
                'last_name': 'Matkin',
                'email': null,
                'gender': 'Female',
                'phone': '833-146-3305'
            ]
        

        @Prop() private q: string

        @Prop() private contacts: any

        search(event:Event) 
            event.preventDefault();
            alert('You searched for ' + this.q)
        
    

</script>

这可行，但我在浏览器中收到以下警告：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "q"

【参考方案1】：

首先，您使用的似乎是vue-property-decorator，而不是vue-class-component。你可以找到vue-property-decoratorhere的github页面。

其次，您收到该错误是因为您使用@Prop() 声明了一个道具，但是您随后在构造函数中设置了它的值。如果你想为你的道具​​添加一个默认值，像这样将它添加到装饰器中

@Prop( default: 'dummy data')
private q: string;

如果您希望 q 成为组件数据的一部分，只需将其定义为类上的属性，而无需像这样的装饰器

private q: string = 'dummy data';

【讨论】：

Vue 新项目模板中的HelloWorld.vue 使用了vue-property-decorator。 vue-class-component 是替代/更好的选择吗？

vue-class-component 只是给你@Component 装饰器，它推荐vue-property-decorator 用于其他装饰器，如@Watch 和@Prop。 vue-property-decorator 实际上依赖于vue-class-component，所以如果你从vue-property-decorator 导入component，你实际上是在使用vue-class-component。 vue-property-decorator 只是为您提供了更多的装饰器，而不仅仅是 @Component 类装饰器。至少这是我的理解。

【参考方案2】：

您应该使用 @Prop 装饰器的 default 参数：

@Prop(
  default: 'dummy data'
) private q!: string

【讨论】：

谢谢。任何指向首选文档的链接？我需要为默认联系人数组使用一个函数，它似乎很高兴。

@SamBarnum 你可以在这里找到the documentation。

那是什么！为了？私人q！

@Julia private 表示成员访问类型。 ! 告诉 typescript 这个属性被初始化没有一个值。 : string 告诉 typescript 这个变量将总是是一个字符串（一旦初始化）