9 月 19 日凌晨,Vue3 在经过多个开发版本的迭代后,终于迎来了它的正式版本,「One Piece」的代号也昭示了其开拓伟大航路的野心。
Vue3 的新特性主要有 Composition API
、Teleport
、Fragments
和 &
等。我们是否也可以在小程序开发中使用这些特性呢?在 Taro 的文档里我们找到了关于 Vue3 的章节,事不宜迟,让我们开始尝试吧。
还没了解过 Vue3 的同学也别急,先了解下 Vue3 的新特性吧:
Vue2.x 基于 Option API(选项 API )
构建组件,一般来说组件拥有 data、methods、computed 等选项。这是一种属性相互隔离的模式,好处是各属性内容分离开,对于新手来说比较友好;但对于大型项目来说,为了修改某个功能,可能需要在一个文件中来回翻页。Vue3 增加了 Composition API 方式(组合 API )
,基于 reactivity(响应式)
的思想进行组件构建,将逻辑封装到函数中,可以实现类似 React Hooks 的逻辑组合和重用。对于大型项目,代码按照具体功能划分,而不是分散在不同的生命周期中,逻辑更加一目了然。
Teleport 功能,使得我们可以将全屏的组件(例如 Toast)移到 Vue APP 节点外,而不需要在 UI 界面上修改其他组件样式,方便实现全屏蒙层、浮层弹窗等效果。
Vue2.x 版本中, 标签下不支持放置多个组件,这个限制在 Vue3 中不再存在。这点比较好理解,下述组件设计在 Vue3 中是没有问题的:
...
...
编译运行微信小程序
npm run dev:weapp
编译后,打开微信开发者工具导入编译后的 dist
目录,首页内容和编译成 H5 的表现都如下图:
写个比较简单的 todolist 计数组件,假设目前已有 4 项代办事项,点击后将新增一项。这里会使用到 Composition API
思路,以及 computed
计算属性。
在用户点击时,第二行“当前操作新增”会根据点击次数递增,总计条数会在 4 的基础上累加。
当前todolist事项已有:{{ existCount }}条;
当前操作已新增:{{ count }} ,共有{{ total }}条。
页面表现如下所示,可见对于 Composition API
的支持的还是不错的。
写个初次登录用户的欢迎弹窗。用户名从 index.vue
传入。首页代码如下:
在 Toast.vue
中,我们会写个属性 to 为 teleportToast
的 Teleport
组件,代码如下:
弹窗标题:
欢迎{{ user }},点击关闭
在 H5 下是正常显示的,弹窗展示以及关闭功能效果如下;在小程序上却报错了,Taro 团队还需要加把劲:
Fragments
特性已经在上面的例子中得到验证,使用没有问题。
我们尝试一下 ,组件里的代码如下:
count:{{ count }},msg:{{ info }}
上述 script
标签里的代码效果等同于下面:
调用它的代码传入 mgs 如下:
运行后,小程序和 H5 都是支持的,页面整体表现如下:
可以看到,运用新特性进行开发,代码书写更加便捷,逻辑更清晰。
,组件里的代码如下:
文字颜色为{{ color }},点击后变为红色
调用它的页面里的代码如下:
小程序和 H5 都没有问题,功能效果如下:
我们将上述几个 Demo 整合在一个项目中,放在Github上,有兴趣的同学可以看看。在线预览地址在这里。
经过验证,Taro3 支持使用最新的 Vue3 开发多端应用,相比之下 H5 的支持度更好一些。
值得一提的是,Taro 团队在技术上一直保持进取,在 Taro 2.0 版本支持了 React Hooks ;根据Taro RFCS,早在 2020-06-03
也已经打算支持 Vue3 了。截至目前,Taro 对 Vue3 的支持在小程序端的稍有补足,希望 Taro 团队可以早日补足这个短板。
推荐文章:
参考文章:
欢迎关注凹凸实验室博客:aotu.io
或者关注凹凸实验室公众号(AOTULabs),不定时推送文章: