ES / TypeScript装饰器，用于类样式的Vue组件

最新推荐文章于 2024-08-25 14:36:28 发布

cuk5340

最新推荐文章于 2024-08-25 14:36:28 发布

阅读量283

点赞数

文章标签： vue python java javascript react ViewUI

原文链接：https://vuejsexamples.com/es-typescript-decorator-for-class-style-vue-components/

版权

Vue类组件 (vue-class-component)

ECMAScript / TypeScript decorator for class-style Vue components.

ECMAScript / TypeScript装饰器，用于类样式的Vue组件。

用法 (Usage)

Required: ECMAScript stage 1 decorators. If you use Babel, babel-plugin-transform-decorators-legacy is needed. If you use TypeScript, enable --experimentalDecorators and --allowSyntheticDefaultImports flag.

必需： ECMAScript 1级装饰器。如果使用Babel，则需要babel-plugin-transform-decorators-legacy 。如果使用TypeScript，请启用--experimentalDecorators和--allowSyntheticDefaultImports标志。

Note:

注意：

methods can be declared directly as class member methods.

methods可以直接声明为类成员方法。
Computed properties can be declared as class property accessors.

可以将计算的属性声明为类属性访问器。
Initial data can be declared as class properties (babel-plugin-transform-class-properties is required if you use Babel).

初始data可以声明为类属性(如果使用Babel，则需要babel-plugin-transform-class-properties )。
data, render and all Vue lifecycle hooks can be directly declared as class member methods as well, but you cannot invoke them on the instance itself. When declaring custom methods, you should avoid these reserved names.

data ， render和所有Vue生命周期挂钩也可以直接声明为类成员方法，但是您不能在实例本身上调用它们。声明自定义方法时，应避免使用这些保留名称。
For all other options, pass them to the decorator function.

对于所有其他选项，请将它们传递给装饰器函数。

例 (Example)

<template>
  <div>
    <input v-model="msg">
    <p>prop: {{propMessage}}</p>
    <p>msg: {{msg}}</p>
    <p>helloMsg: {{helloMsg}}</p>
    <p>computed msg: {{computedMsg}}</p>
    <button @click="greet">Greet</button>
  </div>
</template>

<script>
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  props: {
    propMessage: String
  }
})
export default class App extends Vue {
  // initial data
  msg = 123

  // use prop values for initial data
  helloMsg = 'Hello, ' + this.propMessage

  // lifecycle hook
  mounted () {
    this.greet()
  }

  // computed
  get computedMsg () {
    return 'computed ' + this.msg
  }

  // method
  greet () {
    alert('greeting: ' + this.msg)
  }
}
</script>

You may also want to check out the @prop and @watch decorators provided by vue-property-decorators.

您可能还需要查看vue-property-decorators提供的@prop和@watch装饰器。

创建自定义装饰器 (Create Custom Decorators)

You can extend the functionality of this library by creating your own decorators. vue-class-component provides createDecorator helper to create custom decorators. createDecorator expects a callback function as the 1st argument and the callback will receive following arguments:

您可以通过创建自己的装饰器来扩展此库的功能。 vue-class-component提供了createDecorator帮助器来创建自定义装饰器。 createDecorator期望将回调函数作为第一个参数，并且该回调将接收以下参数：

options: Vue component options object. Changes for this object will affect the provided component.
options ：Vue组件选项对象。对该对象所做的更改将影响所提供的组件。
key: The property or method key that the decorator is applied.
key ：装饰器应用的属性或方法密钥。
parameterIndex: The index of a decorated argument if the custom decorator is used for an argument.
parameterIndex ：如果自定义修饰符用于参数，则修饰参数的索引。

Example of creating NoCache decorator:

创建NoCache装饰器的示例：

// decorators.js
import { createDecorator } from 'vue-class-component'

export const NoCache = createDecorator((options, key) => {
  // component options should be passed to the callback
  // and update for the options object affect the component
  options.computed[key].cache = false
})

import { NoCache } from './decorators'

@Component
class MyComp extends Vue {
  // the computed property will not be cached
  @NoCache
  get random () {
    return Math.random()
  }
}

添加自定义挂钩 (Adding Custom Hooks)

If you use some Vue plugins like Vue Router, you may want class components to resolve hooks that they provides. For that case, Component.registerHooks allows you to register such hooks:

如果您使用某些Vue插件(如Vue Router)，则可能希望类组件解析它们提供的钩子。在这种情况下， Component.registerHooks允许您注册以下挂钩：

// class-component-hooks.js
import Component from 'vue-class-component'

// Register the router hooks with their names
Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave',
  'beforeRouteUpdate' // for vue-router 2.2+
])

// MyComp.js
import Vue from 'vue'
import Component from 'vue-class-component'

@Component
class MyComp extends Vue {
  // The class component now treats beforeRouteEnter
  // and beforeRouteLeave as Vue Router hooks
  beforeRouteEnter () {
    console.log('beforeRouteEnter')
  }

  beforeRouteLeave () {
    console.log('beforeRouteLeave')
  }
}

Note that you have to register the hooks before component definition.

请注意，必须在组件定义之前注册钩子。

// main.js

// Make sure to register before importing any components
import './class-component-hooks'

import Vue from 'vue'
import MyComp from './MyComp'

new Vue({
  el: '#app',
  components: {
    MyComp
  }
})

类属性的警告 (Caveats of Class Properties)

vue-class-component collects class properties as Vue instance data by instantiating the original constructor under the hood. While we can define instance data like native class manner, we sometimes need to know how it works.

vue-class-component通过在内部实例化原始构造函数，将类属性作为Vue实例数据收集。尽管我们可以像本机类方式那样定义实例数据，但有时我们需要知道其工作方式。

`this`属性值 (`this` value in property)

If you define an arrow function as a class property and access this in it, it will not work. This is because this is just a proxy object to Vue instance when initializing class properties:

如果将箭头函数定义为类属性并在其中访问this属性，则它将不起作用。这是因为this只是初始化类属性时Vue实例的代理对象：

@Component
class MyComp extends Vue {
  foo = 123

  bar = () => {
    // Does not update the expected property.
    // `this` value is not a Vue instance in fact.
    this.foo = 456
  }
}

You can simply define a method instead of a class property in that case because Vue will bind the instance automatically:

在这种情况下，您可以简单地定义一个方法而不是一个类属性，因为Vue会自动绑定实例：

@Component
class MyComp extends Vue {
  foo = 123

  bar () {
    // Correctly update the expected property.
    this.foo = 456
  }
}

`undefined`不会React (`undefined` will not be reactive)

To take consistency between the decorator behavior of Babel and TypeScript, vue-class-component does not make a property reactive if it has undefined as initial value. You should use null as initial value or use data hook to initialize undefined property instead.

为了在Babel和TypeScript的装饰器行为之间保持一致，如果vue-class-component具有undefined为初始值的属性，则不会使该属性具有React性。您应该使用null作为初始值，或者使用data挂钩初始化undefined属性。

@Component
class MyComp extends Vue {
  // Will not be reactive
  foo = undefined

  // Will be reactive
  bar = null

  data () {
    return {
      // Will be reactive
      baz: undefined
    }
  }
}