uni-app: 使用Vue.js須要注意哪些問題？

前言

uni-app 在發佈到 H5 時，是支持全部 vue 的語法的。可是發佈到App或者小程序時，因爲各個平臺等限制，沒法實現所有 vue 語法，本文將詳細講解差別。

相比Web平臺， Vue.js 在 uni-app 中使用差別主要集中在兩個方面：

新增：uni-app除了支持Vue實例的生命週期，還支持應用啓動、頁面顯示等生命週期

受限：相比web平臺，在小程序和App端部分功能受限，具體見下。

生命週期

uni-app 在支持完整 Vue 實例的生命週期上，同時還新增 應用生命週期 及 頁面生命週期。

詳見Vue官方文檔：生命週期鉤子。

應用生命週期包括下列函數

一、onLaunch 當uni-app 初始化完成時觸發（全局只觸發一次）

二、onShow 當 uni-app 啓動，或從後臺進入前臺顯示

三、onHide 當 uni-app 從前臺進入後臺

四、onUniNViewMessage 對 nvue 頁面發送的數據進行監聽

注意 （1）、應用生命週期僅可在App.vue中監聽，在其它頁面監聽無效。

（2）、onlaunch裏進行頁面跳轉，可能遇白屏報錯，能夠去官方查找解決方案。

頁面生命週期

注意 （1）、onTabItemTap經常使用於點擊當前tabitem，滾動或刷新當前頁面。若是是點擊不一樣的tabitem，必定會觸發頁面切換。

（2）、若是想在App端實現點擊某個tabitem不跳轉頁面，不能使用onTabItemTap，可使用plus.nativeObj.view放一個區塊蓋住原先的tabitem，並攔截點擊事件。

（3）、onTabItemTap在App端，從HBuilderX 1.9 的自定義組件編譯模式開始支持。

語法支持

支持的 vue 語法 一、支持過濾器 filter

二、支持比較複雜的 JavaScript 渲染表達式

三、支持在 template 內使用 methods 中的函數

四、支持 v-html （同 rich-text 的解析）

五、支持 v-slot 新語法

六、支持解構插槽 Prop 設置默認值

七、支持 slot 後備內容

八、組件支持原生事件綁定，如：@tap.native

不支持的 vue 語法 一、class不支持綁定Obejct變量（使用字符串的形式綁定）

二、不支持事件修飾符：prevent、passive（在App與小程序平臺，使用stop修飾符，既能夠阻止冒泡也能阻止默認行爲）

三、不支持render、inline-template、X-Templates、keep-alive、transition

四、不支持使用 Vue.use 的方式註冊全局組件（在main.js使用Vue.component的方式引入）

列表渲染

一、在H5平臺 使用 v-for 循環整數時和其餘平臺存在差別，如 v-for="(ite`m, index) in 10" 中，在H5平臺 item 從 1 開始，其餘平臺 item 從 0 開始，可以使用第二個參數 index 來保持一致。

二、在非H5平臺 循環對象時不支持第三個參數，如 v-for="(value, name, index) in object" 中，index 參數是不支持的。

事件處理

幾乎全支持 事件處理器

// 事件映射表，左側爲 WEB 事件，右側爲 ``uni-app`` 對應事件
{
  click: 'tap',
  touchstart: 'touchstart',
  touchmove: 'touchmove',
  touchcancel: 'touchcancel',
  touchend: 'touchend',
  tap: 'tap',
  longtap: 'longtap',
  input: 'input',
  change: 'change',
  submit: 'submit',
  blur: 'blur',
  focus: 'focus',
  reset: 'reset',
  confirm: 'confirm',
  columnchange: 'columnchange',
  linechange: 'linechange',
  error: 'error',
  scrolltoupper: 'scrolltoupper',
  scrolltolower: 'scrolltolower',
  scroll: 'scroll'
}
複製代碼

注意：

一、爲兼容各端，事件需使用 v-on 或 @ 的方式綁定，請勿使用小程序端的bind 和 catch 進行事件綁定。

二、事件修飾符 .stop：各平臺均支持， 使用時會阻止事件冒泡，在非 H5 端同時也會阻止事件的默認行爲 .prevent 僅在 H5 平臺支持 .self：僅在 H5 平臺支持 .once：僅在 H5 平臺支持 .capture：僅在 H5 平臺支持 .passive：僅在 H5 平臺支持

三、若須要禁止蒙版下的頁面滾動，可以使用 @touchmove.stop.prevent="moveHandle"，moveHandle 能夠用來處理 touchmove 的事件，也能夠是一個空函數。

<view class="mask" @touchmove.stop.prevent="moveHandle"></view>
複製代碼

四、按鍵修飾符：uni-app運行在手機端，沒有鍵盤事件，因此不支持按鍵修飾符。

命名限制

在 uni-app 中如下這些做爲保留關鍵字，不可做爲組件名。 a, canvas, cell, content, countdown, datepicker, div, element, embed, header, image, img, indicator, input, link, list, loading-indicator, loading, marquee, meta, refresh, richtext, script, scrollable, scroller, select, slider-neighbor, slider, slot, span, spinner, style, svg, switch, tabbar, tabheader, template, text, textarea, timepicker, trisition-group, trisition, video, view, web

除以上列表中的名稱外，標準的 HTML 及 SVG 標籤名也不能做爲組件名。

其餘疑難雜症

一、如何獲取上個頁面傳遞的數據 在 onLoad 裏獲得，onLoad 的參數是其餘頁面打開當前頁面所傳遞的數據。

二、如何捕獲 app 的 onError 因爲 onError 並非完整意義的生命週期，因此只提供一個捕獲錯誤的方法，在 app 的根組件上添加名爲 onError 的回調函數便可。以下：

export default {
   // 只有 app 纔會有 onLaunch 的生命週期
   onLaunch () {
       // ...
   },
   // 捕獲 app error
   onError (err) {
       console.log(err)
   }
}
複製代碼

三、組件屬性設置不生效解決辦法 當重複設置某些屬性爲相同的值時，不會同步到view層。 例如：每次將scroll-view組件的scroll-top屬性值設置爲0，只有第一次能順利返回頂部。 這和props的單向數據流特性有關，組件內部scroll-top的實際值改動後，其綁定的屬性並不會一同變化。

解決辦法有兩種（以scroll-view組件爲例）： （1）、監聽scroll事件，記錄組件內部變化的值，在設置新值以前先設置爲記錄的當前值

<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">

<script> export default { data() { return { scrollTop: 0, old: { scrollTop: 0 } } }, methods: { scroll: function(e) { this.old.scrollTop = e.detail.scrollTop }, goTop: function(e) { this.scrollTop = this.old.scrollTop this.$nextTick(function() { this.scrollTop = 0 }); } } } </script>
複製代碼

（2）、監聽scroll事件，獲取組件內部變化的值，實時更新其綁定值

<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">

<script> export default { data() { return { scrollTop: 0, } }, methods: { scroll: function(e) { this.scrollTop = e.detail.scrollTop }, goTop: function(e) { this.scrollTop = 0 } } } </script>
複製代碼

第二種解決方式在某些組件可能形成抖動，推薦第一種解決方式。

最後的最後，謝謝你們支持。

喜歡的能夠關注我哦!

原文地址：www.javanx.cn/20190827/un…