vue中nextTick的降级方式有哪些?
降级的目的:为了兼容vue的运行环境。
关于这个问题,要分vue2和vue3。
下面深入源码去看看。
vue2的nextTick实现
github仓库地址:github.com/vuejs/vue/t…
github1s在线查看:github1s.com/vuejs/vue/b…
vue2是到v2.6后后续就不维护了,所以查看2.6分支。
源码路径:src/core/util/next-tick.js
vue2的源码中可以看到,先判断是否支持
Promise,如果不支持 Promise,则降级到 MutationObserver,如果还不支持,再降级到 setImmediate,最后降级到 setTimeout
vue3的nextTick实现
github仓库地址:github.com/vuejs/core
github1s在线查看:github1s.com/vuejs/core/…
源码路径:packages/runtime-core/src/scheduler.ts
【注意:vue2和vue3分别在不同的仓库。vue3用的monorepo的方式管理源码哟~】
vue3的源码中可以看到,直接用的Promise的then方法。可以看出vue3默认假设浏览器支持 ES2015(ES6)+ 特性,包括 Promise,所以不针对这块继续做兼容了。
补充:ES2015和ES6
ES2015 和 ES6 是同一件事情的两个不同名称。
ES6 是 ECMAScript 的第六版的简称,这是 JavaScript 语言的国际标准。然而,从这个版本开始,ECMAScript 的命名规则改变了,开始使用发布年份来命名。因此,ES6 也被称为 ES2015,因为这个版本在 2015 年发布。
ES2015 或 ES6,它们都是指同一件事情,即 ECMAScript 的第六版。这个版本引入了很多新的语言特性,例如 let 和 const 声明、箭头函数、Promises、类(class)等。
总结
vue2里面nextTick的降级方式依次是:
Promise -> MutationObserver -> setImmediate -> setTimeout
vue3里面nextTick的降级方式是:
Promise