uni-app 在發(fā)布到H5時(shí)支持所有vue的語(yǔ)法；發(fā)布到App和小程序時(shí)，由于平臺(tái)限制，無(wú)法實(shí)現(xiàn)全部vue語(yǔ)法，但uni-app仍是是對(duì)vue語(yǔ)法支持度最高的跨端框架。本文將詳細(xì)講解差異。

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、成都網(wǎng)站建設(shè)、溫縣網(wǎng)絡(luò)推廣、微信小程序開發(fā)、溫縣網(wǎng)絡(luò)營(yíng)銷、溫縣企業(yè)策劃、溫縣品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供溫縣建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com

相比Web平臺(tái)， Vue.js 在 uni-app 中使用差異主要集中在兩個(gè)方面：

• 新增：uni-app除了支持Vue實(shí)例的生命周期，還支持應(yīng)用啟動(dòng)、頁(yè)面顯示等生命周期
• 受限：相比web平臺(tái)，在小程序和App端部分功能受限，具體見下。
• v3版本App端可以使用更多的vue特性，詳見

生命周期

uni-app 完整支持 Vue 實(shí)例的生命周期，同時(shí)還新增 應(yīng)用生命周期 及 頁(yè)面生命周期。

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

模板語(yǔ)法

uni-app 完整支持 Vue 模板語(yǔ)法。

詳見Vue官方文檔：模板語(yǔ)法。

注意 如果使用老版的非自定義組件模式，即manifest中"usingComponents":false，部分模版語(yǔ)法不支持，但此模式已于2019年11月起下線。

data 屬性

data 必須聲明為返回一個(gè)初始數(shù)據(jù)對(duì)象的函數(shù)；否則頁(yè)面關(guān)閉時(shí)，數(shù)據(jù)不會(huì)自動(dòng)銷毀，再次打開該頁(yè)面時(shí)，會(huì)顯示上次數(shù)據(jù)。

//正確用法，使用函數(shù)返回對(duì)象
data() {
    return {
        title: 'Hello'
    }
}

//錯(cuò)誤寫法，會(huì)導(dǎo)致再次打開頁(yè)面時(shí)，顯示上次數(shù)據(jù)
data: {
    title: 'Hello'
}

全局變量

實(shí)現(xiàn)全局變量的方式需要遵循 Vue 單文件模式的開發(fā)規(guī)范。詳細(xì)參考：uni-app全局變量的幾種實(shí)現(xiàn)方式

Class 與 Style 綁定

為節(jié)約性能，我們將 Class 與 Style 的表達(dá)式通過(guò) compiler 硬編碼到 uni-app 中，支持語(yǔ)法和轉(zhuǎn)換效果如下：

class 支持的語(yǔ)法:

111
222
333
444
555

style 支持的語(yǔ)法:

666
777

非H5端不支持 Vue官方文檔：Class 與 Style 綁定 中的 classObject 和 styleObject 語(yǔ)法。

不支持示例：

注意：以:style=""這樣的方式設(shè)置px像素值，其值為實(shí)際像素，不會(huì)被編譯器轉(zhuǎn)換。

此外還可以用 computed 方法生成 class 或者 style 字符串，插入到頁(yè)面中，舉例說(shuō)明：

用在組件上

非H5端暫不支持在自定義組件上使用 Class 與 Style 綁定

計(jì)算屬性

完整支持 Vue官方文檔：計(jì)算屬性。

條件渲染

完整支持 Vue官方文檔：條件渲染

列表渲染

完整vue列表渲染 Vue官方文檔：列表渲染

key

如果列表中項(xiàng)目的位置會(huì)動(dòng)態(tài)改變或者有新的項(xiàng)目添加到列表中，并且希望列表中的項(xiàng)目保持自己的特征和狀態(tài)（如  中的輸入內(nèi)容， 的選中狀態(tài)），需要使用 :key 來(lái)指定列表中項(xiàng)目的唯一的標(biāo)識(shí)符。

:key 的值以兩種形式提供

• 使用 v-for 循環(huán) array 中 item 的某個(gè) property，該 property 的值需要是列表中唯一的字符串或數(shù)字，且不能動(dòng)態(tài)改變。
• 使用 v-for 循環(huán)中 item 本身，這時(shí)需要 item 本身是一個(gè)唯一的字符串或者數(shù)字

當(dāng)數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時(shí)候，會(huì)校正帶有 key 的組件，框架會(huì)確保他們被重新排序，而不是重新創(chuàng)建，以確保使組件保持自身的狀態(tài)，并且提高列表渲染時(shí)的效率。

如不提供 :key，會(huì)報(bào)一個(gè) warning， 如果明確知道該列表是靜態(tài)，或者不必關(guān)注其順序，可以選擇忽略。

示例：

注意事項(xiàng)

• 在H5平臺(tái) 使用 v-for 循環(huán)整數(shù)時(shí)和其他平臺(tái)存在差異，如 v-for="(item, index) in 10" 中，在H5平臺(tái) item 從 1 開始，其他平臺(tái) item 從 0 開始，可使用第二個(gè)參數(shù) index 來(lái)保持一致。
• 在非H5平臺(tái) 循環(huán)對(duì)象時(shí)不支持第三個(gè)參數(shù)，如 v-for="(value, name, index) in object" 中，index 參數(shù)是不支持的。

事件處理器

幾乎全支持 Vue官方文檔：事件處理器

// 事件映射表，左側(cè)為 WEB 事件，右側(cè)為 ``uni-app`` 對(duì)應(yīng)事件
{
    click: 'tap',
    touchstart: 'touchstart',
    touchmove: 'touchmove',
    touchcancel: 'touchcancel',
    touchend: 'touchend',
    tap: 'tap',
    longtap: 'longtap', //推薦使用longpress代替
    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 或 @ 的方式綁定，請(qǐng)勿使用小程序端的bind 和 catch 進(jìn)行事件綁定。
• 事件修飾符.stop：各平臺(tái)均支持， 使用時(shí)會(huì)阻止事件冒泡，在非 H5 端同時(shí)也會(huì)阻止事件的默認(rèn)行為.prevent 僅在 H5 平臺(tái)支持.self：僅在 H5 平臺(tái)支持.once：僅在 H5 平臺(tái)支持.capture：僅在 H5 平臺(tái)支持.passive：僅在 H5 平臺(tái)支持
• 若需要禁止蒙版下的頁(yè)面滾動(dòng)，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用來(lái)處理 touchmove 的事件，也可以是一個(gè)空函數(shù)。
• 按鍵修飾符：uni-app運(yùn)行在手機(jī)端，沒(méi)有鍵盤事件，所以不支持按鍵修飾符。

表單控件綁定

支持 Vue官方文檔：表單控件綁定。

建議開發(fā)過(guò)程中直接使用 uni-app：表單組件。用法示例：

H5 的select 標(biāo)簽用 picker 組件進(jìn)行代替

表單元素 radio 用 radio-group 組件進(jìn)行代替

v-html指令

App端（vue頁(yè)面V3編譯模式）和H5端支持v-html，其他端不支持v-html。

跨端的富文本處理方案詳見：https://ask.dcloud.net.cn/article/35772

標(biāo)題名稱：創(chuàng)新互聯(lián)UNI-APP教程：使用Vue.js的注意事項(xiàng)
文章來(lái)源：http://uogjgqi.cn/article/djehgie.html