-
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 -S
. -
import in your component,
import { Decorators } from 'v-decorators'
.
-
@Decorators.AutoCatch(catchMode?: string)
params:
- None, default. same as 'log'.
- 'error': print error with console.error.
- 'log': print error with console.log.
- 'slient': no error message will be displayed.
${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:
- time: denounce time.
desc: functions are triggered at most once in a specified time.
-
@Decorators.Delay(time?: number)
params:
- time: delay time.
desc: delayed execution when a function is called. decorator will automatically clean the timer.
-
@Decorators.Time()
params:
- None.
desc: statistics and displays the execution time of the current function, just like
console.time
andconsole.timeEnd
.
-
@Decorators.Shortcuts(obj: object)
params:
- obj: key-value pairs that need to bind scopes.
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.
ex: ``` 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:
- message: logs.
desc: show a deprecation message when function called.
-
@Decorators.NextTick()
params: None.
desc: run function in Vue.nextTick. more information: Vue.nextTick