uni-app 在釋出到H5時支援所有vue的語法；釋出到App和小程式時，由於平臺限制，無法實現全部vue語法，但uni-app仍是是對vue語法支援度最高的跨端框架。本文將詳細講解差異。

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

新增：uni-app除了支援Vue例項的生命週期，還支援應用啟動、頁面顯示等生命週期
受限：相比web平臺，在小程式和App端部分功能受限，具體見下。
v3版本App端可以使用更多的vue特性，詳見

生命週期

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

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

模板語法

uni-app 完整支援 Vue 模板語法。

詳見Vue官方文件：模板語法。

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

data 屬性

data 必須宣告為返回一個初始資料物件的函式；否則頁面關閉時，資料不會自動銷燬，再次開啟該頁面時，會顯示上次資料。

//正確用法，使用函式返回物件
    data() {    
    return {
        title: 'Hello'
    }
}
//錯誤寫法，會導致再次開啟頁面時，顯示上次資料
    data: {
        title: 'Hello'
   }

全域性變數

實現全域性變數的方式需要遵循 Vue 單檔案模式的開發規範。詳細參考：uni-app全域性變數的幾種實現方式

Class 與 Style 繫結

為節約效能，我們將 Class 與 Style 的表示式透過 compiler 硬編碼到 uni-app 中，支援語法和轉換效果如下：

class 支援的語法:

<view :class="{ active: isActive }">111</view>
<view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view>
<view class="static" :class="[activeClass, errorClass]">333</view>
<view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</view>
<view class="static" v-bind:class="[{ active: isActive }, errorClass]">555</view>

style 支援的語法:

<view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view>
<view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view>

非H5端不支援 Vue官方文件：Class與Style繫結中的 classObject 和 styleObject 語法。

不支援示例：

<template>
    <view :class="[activeClass]" :style="[baseStyles,overridingStyles]"></view>
</template>
<script>
    export default {
        data() {            
            return {
                activeClass: {                  
                      'active': true,                
                      'text-danger': false
                },
                baseStyles: {
                    color: 'green',
                    fontSize: '30px'
                },
                overridingStyles: {               
                           'font-weight': 'bold'
                }
            }
        }
    }
</script>

注意：以:style=""這樣的方式設定px畫素值，其值為實際畫素，不會被編譯器轉換。

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

<template>
    <!-- 支援 -->
    <view class="container" :class="computedClassStr"></view>
    <view class="container" :class="{active: isActive}"></view>
    <!-- 不支援 -->
    <view class="container" :class="computedClassObject"></view>
</template>
<script>
    export default {
        data () {          
              return {
                isActive: true
            }
        },
        computed: {
            computedClassStr () {             
                 return this.isActive ? 'active' : ''
            },
            computedClassObject () {             
                 return { active: this.isActive }
            }
        }
    }
</script>

用在元件上

非H5端暫不支援在自定義元件上使用 Class 與 Style 繫結

計算屬性

完整支援 Vue官方文件：計算屬性。

條件渲染

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

列表渲染

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

key

如果列表中專案的位置會動態改變或者有新的專案新增到列表中，並且希望列表中的專案保持自己的特徵和狀態（如 <input> 中的輸入內容，<switch> 的選中狀態），需要使用 :key 來指定列表中專案的唯一的識別符號。

:key 的值以兩種形式提供

使用 v-for 迴圈 array 中 item 的某個 property，該 property 的值需要是列表中唯一的字串或數字，且不能動態改變。
使用 v-for 迴圈中 item 本身，這時需要 item 本身是一個唯一的字串或者數字

當資料改變觸發渲染層重新渲染的時候，會校正帶有 key 的元件，框架會確保他們被重新排序，而不是重新建立，以確保使元件保持自身的狀態，並且提高列表渲染時的效率。

如不提供 :key，會報一個 warning，如果明確知道該列表是靜態，或者不必關注其順序，可以選擇忽略。

示例：

<template>
    <view>
        <!-- array 中 item 的某個 property -->
        <view v-for="(item,index) in objectArray" :key="item.id">
            {{index +':'+ item.name}}       
        </view>
        <!-- item 本身是一個唯一的字串或者數字時，可以使用 item 本身 -->
        <view v-for="(item,index) in stringArray" :key="item">
            {{index +':'+ item}}     
        </view>
    </view>
</template>
<script>
export default {
  data () {   
         return {
          objectArray:[
         {
          id:0,
          name:'li ming'
          },
         {
          id:1,
          name:'wang peng'
          }
         ],
      stringArray:['a','b','c']
    }
  }
}
</script>

注意事項

在H5平臺使用 v-for 迴圈整數時和其他平臺存在差異，如 v-for="(item, index) in 10" 中，在H5平臺 item 從 1 開始，其他平臺 item 從 0 開始，可使用第二個引數 index 來保持一致。
在非H5平臺迴圈物件時不支援第三個引數，如 v-for="(value, name, index) in object" 中，index 引數是不支援的。

事件處理器

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

// 事件對映表，左側為 WEB 事件，右側為 ``uni-app`` 對應事件
{
    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 或 @ 的方式繫結，請勿使用小程式端的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執行在手機端，沒有鍵盤事件，所以不支援按鍵修飾符。

表單控制元件繫結

支援 Vue官方文件：表單控制元件繫結。

建議開發過程中直接使用 uni-app：表單元件。用法示例：

H5 的select 標籤用 picker 元件進行代替

<template>
  <view>
    <picker @change="bindPickerChange" :value="index" :range="array">
      <view class="picker">
        當前選擇：{{array[index]}}   
      </view>
    </picker>
  </view>
</template>
<script>
export default {
  data () {   
     return {
      index: 0,
      array: ['A', 'B', 'C']
    }
  },
  methods: {
    bindPickerChange (e) {  
     console.log(e)
    }
  }
}</script>

表單元素 radio 用 radio-group 元件進行代替

<template>
  <view>
    <radio-group class="radio-group" @change="radioChange">
      <label class="radio" v-for="(item, index) in items" :key="item.name">
        <radio :value="item.name" :checked="item.checked"/> {{item.value}}
      </label>
    </radio-group>
  </view>
</template>
<script>
export default {
  data () {    return {
      items: [
        {name: 'USA', value: '美國'},
        {name: 'CHN', value: '中國', checked: 'true'},
        {name: 'BRA', value: '巴西'},
        {name: 'JPN', value: '日本'},
        {name: 'ENG', value: '英國'},
        {name: 'TUR', value: '法國'}
      ]
    }
  },
  methods: {
    radioChange (e) {
      console.log('radio發生change事件，攜帶value值為：', e.target.value)
    }
  }
}
</script>

V-html指令

App端（vue頁面V3編譯模式）和H5端支援v-html，其他端不支援v-html。

使用Vue.js的注意事項