vue3.0-beta 版本已经发布了一段时间了,正式版本据说在年中发布(直播的时候说的是年中还是年终,网上传闻说是 6 月份)。嘴上说着学不动,身体却很诚实地创建一个 vue3 的项目,兴致勃勃地引入 vue2 插件的时候,眉头一皱,发现事情并没有那么简单。
浏览器无情地抛出了一个错误:
Uncaught TypeError: Cannot set property ‘\$toast’ of undefined
不是说兼容 vue2 的写法吗,插件不兼容,这是闹哪样?发下牢骚之后还是得解决问题。研究插件的代码,是这么实现的
|
|
vue2 插件的时候会暴露一个 install 方法,并通过全局方法 Vue.use() 使用插件。install 方法的第一个参数是 Vue 构造器,插件的方法就添加在 Vue 构造器的原型对象上。通过 new Vue() 实例化后,在组件中就能调用 this.\$toast 使用组件了。(具体实现可以参考我之前的一篇文章:Vue.js 插件开发详解,下面也是基于这个插件 demo 对比修改)。
而 vue3 的 install 方法不是传入 Vue 构造器,没有原型对象,Vue.prototype 是 undefined,所以报错了。vue3 采用依赖注入的方式,在插件内部利用 provide 和 inject 并暴露出一个组合函数,在组件中使用。
插件实现
基本框架
下面先实现一个插件的基本框架。
|
|
组件使用
在 provideToast 方法中,提供了 _toast 方法,那在根组件中 调用 provideToast 方法,传入插件参数,子组件中就能使用 toast 功能了。
|
|
在 useToast 方法中,返回了 toast 方法,那在所有的后代组件中调用 useToast 方法,就能拿到 toast 方法了。
|
|
数据响应
想要控制 toast DOM 元素的显示隐藏,以及提示文本的变化,需要创建响应式的数据,在 vue3 中可以通过 reactive 方法创建一个响应式对象。
|
|
挂载 DOM
在页面中显示一个 toast,那就免不了要创建一个 DOM 并挂载到页面中。在 vue2 中是通过 Vue.extend 创建一个子类,将子类生成的实例挂载到某个元素中,而 vue3 中通过 createApp 方法来实现的。
|
|
完整示例
上面的每一步是这个插件的关键内容,接下来就是完善下细节,比如用户配置插件的全局参数,设置 toast 的样式,持续时间,显示位置等,这里就不一一细讲了,完整示例如下:
|
|
总结
与 vue2 的插件比较大不同点在于,需要用到 toast 的每个组件中,都需要引入 useToast 方法,看起来会有点麻烦。不过其实这也是 vue 组合式 API 的目的,让代码更可读、更容易被理解,清楚的知道这个方法就是来自这里。正如标题所示,这是尝鲜版,vue3 正式版还未发布,未来会不会有更多的插件形式,咋也不敢问,至少这种还是比较稳的。