Vue · PHP/Python/前端/Linux 等等學習筆記

[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)