vue-class-component
為了定義帶有裝飾器風(fēng)格的Vue組件低滩，如果使用Babel轉(zhuǎn)換，必須使用babel-plugin-transform-decorators-legacy 包
如果使用ts編寫鹃愤，--experimentalDecorators 設(shè)置為true
vue-class-component 提供mixins方法
//mixin.js
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export clas MyMixin extends Vue {
mixinValue = 'Hello'
}
引入mixin.js
import Component, { mixins } from 'vue-class-component'
import MyXin from './mixin.js'
@Component
export class MyComp extends mixins(MyXin) {
created() {
console.log(this.mixinValue) // Hello
}
}
創(chuàng)建自定義裝飾器
vue-class-component 提供createDecorator 方法創(chuàng)建自定義裝飾器
//decorators.js
import { createDecorator } from 'vue-class-component'
export const NoCache = createDecorator((options, key) => {
options.computed[key].cache = false
})
import { NoCache } from './decorators'
@Component
class MyComp extends Vue {
@NoCache
get random() {
return Math.random()
}
}
增加自定義鉤子
如果你使用像Vue-router 一樣的插件，想在組件里使用它們提供的鉤子浮驳，registerHooks方法可以實(shí)現(xiàn)
//class-component-hooks.js
import Component from 'vue-class-component'
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()
}
beoferRouteLeave(to, from, next) {
console.log('beforeRouteLeave')
next()
}
}
插件鉤子需在你定義組件的時(shí)候優(yōu)先執(zhí)行
//main.js
import './class-component-hooks'
import Vue from 'vue'
import MyComp fron './MyComp'
new Vue({
el: '#app',
components: {
MyComp
}
})
??注意：
1物延、this 變量箭頭函數(shù)綁定父級(jí)域，但在Component裝飾器中這么使用會(huì)報(bào)錯(cuò)
@Component
class MyComp extends Vue {
foo = 123
bar = () => {
this.foo = 456 //this 已經(jīng)不在vue的實(shí)例了
}
}
你可以直接使用费尽，因?yàn)閂ue已經(jīng)將this自動(dòng)綁定了
@Component
class MyComp extends Vue {
foo = 123
bar() {
this.foo = 456 //Vue已經(jīng)將this自動(dòng)綁定了
}
}
2赠群、變量定義為undefined，無法被Vue進(jìn)行數(shù)據(jù)監(jiān)控
@Component
class MyComp extends Vue {
foo = undefined //無效
bar = null //有效
data() {
retuen {
baz : undefined // 有效
}
}
}
