[TOC] ## Vue 自 Taro v3.3+，支持使用 H5 标签进行开发，详情请见[使用 HTML 标签](https://docs.taro.zone/docs/use-h5) ## 规范 ### 组件 1. 组件名遵从**小程序规范**（全小写，kebab-case）。 2. 组件属性遵从**小程序规范**（全小写，kebab-case）。 3. `Boolean`值的组件属性需要显式绑定为`true`，不支持简写。 ### 事件 1. 使用`@`修饰符（或`v-on:`，更多用法可以参考[Vue 文档](https://cn.vuejs.org/v2/guide/events.html)）替代小程序事件名中的`bind`(替代支付宝小程序事件名中的`on`)。 2. Vue 中点击事件使用`@tap`。 3. 事件名称一般遵循组件属性规范（全部小写）。 4. 在`vue@3.0.6`或之后版本使用 JSX 时，事件名遵循**onCamelcase**规范，例如`onGetphonenumber`。具体原因可参考[#8796](https://github.com/NervJS/taro/issues/8796#issuecomment-802796286)。 ## 其它限制[​](https://docs.taro.zone/docs/vue3#%E5%85%B6%E5%AE%83%E9%99%90%E5%88%B6 "其它限制的直接链接") * 小程序中不支持`<style scoped>`，建议使用 cssModules 代替。[#6662](https://github.com/NervJS/taro/issues/6662) * Vue 3 内部实现使用了 Proxy ，在 iOS 9 及以下操作系统无法运行。但 Vue 官方团队在正式版发布后会推出兼容版本。 * 小程序端非类似 HTML 表单标签规范的表单组件，如 Picker，暂不兼容 v-model。Vue3 的 v-model 绑定属性改为了 **modelValue**，事件绑定改为了 **update:modelValue**。对于 HTML 表单标签会自动对接表单的值与事件，例如 input 会自动对应 modelValue 与 value、update:modelValue 与 @input。但对于 Picker 这种小程序特有表单则无法对应，建议这种情况不使用 v-model。 * VirtualList 组件需升级至 v3.6+ 版本 * 在 H5 端使用 ref 获取基础组件的 DOM 节点，现在只能得到适配层的 Vue 组件实例，而不是对应的 webComponent 根节点。在 Vue2 里可以通过修改父元素的 refs 属性实现，但 Vue3 中组件间初始化顺序有变化，因此暂时不能支持。（自 Taro v3.4.5 起，不再存在此限制，[#11537](https://github.com/NervJS/taro/pull/11537)） ### 组合式 API 基于比页面的声明周期对应 * [useReady](https://docs.taro.zone/docs/composition-api#useready) * [useDidShow](https://docs.taro.zone/docs/composition-api#usedidshow) * [useDidHide](https://docs.taro.zone/docs/composition-api#usedidhide) * [useUnload](https://docs.taro.zone/docs/composition-api#useunload) * [usePullDownRefresh](https://docs.taro.zone/docs/composition-api#usepulldownrefresh) * [useReachBottom](https://docs.taro.zone/docs/composition-api#usereachbottom) * [usePageScroll](https://docs.taro.zone/docs/composition-api#usepagescroll) * [useResize](https://docs.taro.zone/docs/composition-api#useresize) * [useShareAppMessage](https://docs.taro.zone/docs/composition-api#useshareappmessage) * [useTabItemTap](https://docs.taro.zone/docs/composition-api#usetabitemtap) * [useShareTimeline](https://docs.taro.zone/docs/composition-api#usesharetimeline) * [useAddToFavorites](https://docs.taro.zone/docs/composition-api#useaddtofavorites) * [useSaveExitState](https://docs.taro.zone/docs/composition-api#usesaveexitstate) * [useTitleClick](https://docs.taro.zone/docs/composition-api#usetitleclick) * [useOptionMenuClick](https://docs.taro.zone/docs/composition-api#useoptionmenuclick) * [usePullIntercept](https://docs.taro.zone/docs/composition-api#usepullintercept)