append transform-decorators-legacy to your .babelrc
file: "plugins": ["transform-decorators-legacy" ...
npm i babel-plugin-transform-decorators-legacy -D
install lib to your project, npm i v-decorators
.
import in your component, import { Decorators } from 'v-decorators'
.
@Decorators.AutoCatch(catchMode?: string)
params:
${functon_name}
: specify a function to handle errors.desc:
help you automatically catch possible errors in async function, no try ... catch
is required to use the function at any time.
before use:
methods: {
async request() { try { await http(...) } catch(e) { ... } },
clickHandle() { request().catch(...) }
}
after use:
methods: {
@Decorators.AutoCatch()
async request() { await http(...) },
clickHandle() { request() }
}
@Decorators.Debounce(time?: number)
params:
desc: functions are triggered at most once in a specified time.
@Decorators.Throttle(wait: number = 300)
params:
desc: creates a throttled function that only invokes func at most once per every wait milliseconds.
@Decorators.Delay(time?: number)
params:
desc: delayed execution when a function is called. decorator will automatically clean the timer.
@Decorators.Time()
params:
desc:
statistics and displays the execution time of the current function, just like console.time
and console.timeEnd
.
@Decorators.Shortcuts(obj: object)
params:
desc: bind data to vue instance, but it's not responsive. it can reduce the volume of your data function, usually used to bind static data used in vue templates. reduce response data can effectively improve perf.
e.g.:
const MAX = '100', datePipe = (date) => { ... }
// ...
// in your component
<div>{{ max }} {{datePipe('2018/12/01')}}</div>
@Decorators.Shortcuts({
max: MAX, datePipe: datePipe,
})
data: () => ({
your responsive datas...
})
@Decorators.Deprecated(message?: string)
params:
desc: show a deprecation message when function called.
@Decorators.NextTick()
params: None.
desc: run function in Vue.nextTick. more information: Vue.nextTick
see examples project