使用 Vue3 开发小程序

前言

9 月 19 日凌晨,Vue3 在经过多个开发版本的迭代后,终于迎来了它的正式版本,「One Piece」的代号也昭示了其开拓伟大航路的野心。

Vue3 的新特性主要有 Composition APITeleportFragments

编译运行微信小程序

npm run dev:weapp

编译后,打开微信开发者工具导入编译后的 dist 目录,首页内容和编译成 H5 的表现都如下图:

使用 Vue3 开发小程序_第4张图片

验证Taro3对Vue3的支持度

Composition API

写个比较简单的 todolist 计数组件,假设目前已有 4 项代办事项,点击后将新增一项。这里会使用到 Composition API 思路,以及 computed 计算属性。

在用户点击时,第二行“当前操作新增”会根据点击次数递增,总计条数会在 4 的基础上累加。


页面表现如下所示,可见对于 Composition API 的支持的还是不错的。

使用 Vue3 开发小程序_第5张图片

Teleport

写个初次登录用户的欢迎弹窗。用户名从 index.vue 传入。首页代码如下:

Toast.vue 中,我们会写个属性 to 为 teleportToastTeleport 组件,代码如下:



在 H5 下是正常显示的,弹窗展示以及关闭功能效果如下;在小程序上却报错了,Taro 团队还需要加把劲:

使用 Vue3 开发小程序_第6张图片

Fragments

Fragments 特性已经在上面的例子中得到验证,使用没有问题。

script setup 语法糖

我们尝试一下

上述 script 标签里的代码效果等同于下面:

调用它的代码传入 mgs 如下:

运行后,小程序和 H5 都是支持的,页面整体表现如下:

使用 Vue3 开发小程序_第7张图片

可以看到,运用新特性进行开发,代码书写更加便捷,逻辑更清晰。

style vars 语法糖

调用它的页面里的代码如下:


小程序和 H5 都没有问题,功能效果如下:

使用 Vue3 开发小程序_第8张图片

结语

我们将上述几个 Demo 整合在一个项目中,放在Github上,有兴趣的同学可以看看。在线预览地址在这里。

经过验证,Taro3 支持使用最新的 Vue3 开发多端应用,相比之下 H5 的支持度更好一些。

值得一提的是,Taro 团队在技术上一直保持进取,在 Taro 2.0 版本支持了 React Hooks ;根据Taro RFCS,早在 2020-06-03 也已经打算支持 Vue3 了。截至目前,Taro 对 Vue3 的支持在小程序端的稍有补足,希望 Taro 团队可以早日补足这个短板。

推荐文章:

  • Vue3 和 React Hooks对比
  • SWR
  • 自定义渲染器的应用

参考文章:

  • [1]Compsition API
  • [2]Teleport
  • [3]

你可能感兴趣的:(使用 Vue3 开发小程序)