回到顶部

「 初音未来：歌姬计划 Mega39's+\游戏档案馆 」2023-06-07 「 戴拿&盖亚奥特曼\皮套摄影 」2024-08-02 「 宝可梦：白金\游戏档案馆 」2023-08-06 「 闪焰王牌/模玩摄影 」2024-08-06 「 多龙巴鲁托\模玩摄影 」2023-06-05 「 泽塔奥特曼\皮套摄影 」2023-06-07 「 阿尔宙斯\模玩摄影 」2023-06-07

vue-class-component对TS的支持 #29

Anuluca Date : 2020-09-07 Tags : 3

❗️ 此笔记写于2020年，请注意实效性

1、什么是vue-class-component？

vue-class-component是Vue推出的用于支持TS的装饰库。
import引入：

1	import Component from 'vue-class-component'

2、特点

1、methods可以直接声明为类成员方法
2、computed属性可以声明为类属性访问器
3、data数据可以声明为类属性
4、data render和所有Vue生命周期挂钩也可以直接声明为类成员方法，但不能在实例本身上调用它们。在声明自定义方法时，应避免使用这些保留名称。

3、使用demo

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

@Component({
  props: {
    propMessage: String
  }
})
export default class App extends Vue {
  // 初始化数据 data可以声明成类属性形式
  msg = 123

  // 使用props
  helloMsg = 'Hello, ' + this.propMessage

  // 生命周期钩子声明  保留名称
  mounted () {
    this.greet()
  }

  // computed属性可以声明成类方法形式
  get computedMsg () {
    return 'computed ' + this.msg
  }

  // method方法可以声明成类方法形式
  greet () {
    alert('greeting: ' + this.msg)
  }
}
</script>

Component.registerHooks

自定义钩子

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

// 注册钩子name
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 {
  beforeRouteEnter (to, from, next) {
    console.log('beforeRouteEnter')
    next() // needs to be called to confirm the navigation
  }

  beforeRouteLeave (to, from, next) {
    console.log('beforeRouteLeave')
    next() // needs to be called to confirm the navigation
  }
}

箭头函数

this为undefined,
原本使用箭头函数的this实际上指向的是vue实例，
但是将箭头函数定义为类属性并在其中访问它，则它将不起作用，this指向的是vue实例的代理

@Component
class MyComp extends Vue {
  foo = 123
  bar = () => {
    this.foo = 456
  }
}

只要将函数定义为方法，就会自动生成vue实例

@Component
class MyComp extends Vue {
  foo = 123

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

类属性的undefined没有做出处理

对于一些属性的初始值应该用null或者data钩子进行处理

@Component
class MyComp extends Vue {
  // 不会进行处理
  foo = undefined

  // 会进行处理
  bar = null

  data () {
    return {
      // 会进行处理
      baz: undefined
    }
  }
}