背景
最近发现有个项目中对$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提案详情