背景
最近发现有个项目中对$nextTick的用法做了约束,统一使用this.$nextTick().then()的方式,此约束来自eslint-plugin-vue的vue/next-tick-style
规则详情
此规则强制规定Vue.nextTick和this.$nextTick需要使用callback或者Promise(Vue2.1.0以下推荐)的风格。
promise
<script>import{nextTickasnt}from'vue';exportdefault{asyncmounted(){/*✓GOOD*/nt().then(()=>callback());awaitnt();callback();Vue.nextTick().then(()=>callback());awaitVue.nextTick();callback();this.$nextTick().then(()=>callback());awaitthis.$nextTick();callback();/*✗BAD*/nt(()=>callback());nt(callback);Vue.nextTick(()=>callback());Vue.nextTick(callback);this.$nextTick(()=>callback());this.$nextTick(callback);}}</script>callback
<script>import{nextTickasnt}from'vue';exportdefault{asyncmounted(){/*✓GOOD*/nt(()=>callback());nt(callback);Vue.nextTick(()=>callback());Vue.nextTick(callback);this.$nextTick(()=>callback());this.$nextTick(callback);/*✗BAD*/nt().then(()=>callback());awaitnt();callback();Vue.nextTick().then(()=>callback());awaitVue.nextTick();callback();this.$nextTick().then(()=>callback());awaitthis.$nextTick();callback();}}</script>规则配置
默认值为promise(Vue版本低于2.1.0才推荐使用callback)
{"vue/next-tick-style":["error","promise"|"callback"]}规则分析
尝试去分析为什么引入这项规则
1. 首先是去分析源码
//只贴出部分代码exportfunctionnextTick(cb?:Function,ctx?:Object){let_resolvecallbacks.push(()=>{if(cb){try{cb.call(ctx)}catch(e){handleError(e,ctx,'nextTick')}}elseif(_resolve){_resolve(ctx)}})if(!pending){pending=truetimerFunc()}//$flow-disable-lineif(!cb&&typeofPromise!=='undefined'){returnnewPromise(resolve=>{_resolve=resolve})}}分析:
可以看到
promise的方式其实就是不传callback,然后返回了一个Promise实例,等到timeFunc()生成的异步任务执行resolve个人观点:其实
timerFunc本身就按promise、MutationObserver、setImmediate、setTimeout的顺序注册了异步任务,然后promise的格式执行then的时候又是一个异步任务,感觉不是很有必要这样去约束
分析到这里,还是不太理解,然后继续,就到eslint-plugin-vue的github上去找相关信息
2. 上github查找
然后在上面找到了vue/next-tick-style的提案详情
总的来说就只是为了代码更加简洁和统一,并没有什么深层次的原因
个人观点:感觉
callback的方式反而更加地直观和简洁,promise的方式还需要在then里面去做回调操作(也可能是用习惯了callback的方式)
综上
建议是爱用哪个用哪个,统一就好
引用
vue/next-tick-style官方文档说明
vue/next-tick-style提案详情