Vue3.x版本最大的一个提升,就是有更好的重用机制,你可以把任何你想独立的模块独立出去。比如加一个显示当前时间的功能(例如:17:30:20)。并且这个功能要在不同的页面进行反复调用。
使用Vue2.x的版本,一定会使用mixins,但是Vue3.x,肯定就不用这个啦
我将会写两个小案例来说明一下这个

获取当前时间

不重用方法

先来看不重用的写法,也就是我们把程序直接写在App.vue这个组件里。这里你可以先顶一个ref变量nowTime,然后通过getNowTime的方法,让他可以显示并一直更新当前时间。最后在return里返回这个变量和方法。

独立模块

当然这个时候如果你需要在其他页面也显示的话,一直复制黏贴,在后期非常不利,也是一种不好的代码编写方式
那么可以将上面的功能变成一个模块,mkdir src/hooks/useTime.ts 建立文件,将上面的东西修改修改复制进入ts中,那么结果就是这样的
需要注意的是,你需要在代码的最前面用import进行引入ref,在最后用export的方式,导出nowTimegetNowTime.

引入模块

现在可以看出这种方式,比vue2中要好很多,不用再使用mixins要好很多。我觉着这个算是Vue3.x一个非常重要的改进

显示Girls图片

独立模块

这里我们使用axios来进行远程随机获得图片,但是我们这里作的不是远程随机获得图片,而是模块化一个通用的远程调用API的组件,这个组件可以远程请求一个指定的URL,并且返回所得到的值。 先用npm的方式安装axios.
新建一个文件,叫做useURLAxios.ts,然后先引入refaxios.在文件里写一个useUrlAxios方法,在方法里声明四个响应式变量resultloadingloadederror。声明好后,使用axios进行访问远程链接。最后记得要进行returnexport default

App.vue

回到App.vue,引入刚刚我们所写的部件,并记得return
修改你的Url为地址即可(需要返回的是json格式

亲亲留个评论再走呗

正在加载评论区...