使用Vue.js的注意事項

2020-04-02 15:04 更新

uni-app 在發(fā)布到H5時支持所有vue的語法;發(fā)布到App和小程序時,由于平臺限制,無法實現(xiàn)全部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 必須聲明為返回一個初始數(shù)據(jù)對象的函數(shù);否則頁面關閉時,數(shù)據(jù)不會自動銷毀,再次打開該頁面時,會顯示上次數(shù)據(jù)。

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

//錯誤寫法,會導致再次打開頁面時,顯示上次數(shù)據(jù)
data: {
    title: 'Hello'
}

全局變量

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

Class 與 Style 綁定

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

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像素值,其值為實際像素,不會被編譯器轉(zhuǎn)換。

此外還可以用 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

如果列表中項目的位置會動態(tài)改變或者有新的項目添加到列表中,并且希望列表中的項目保持自己的特征和狀態(tài)(如 <input> 中的輸入內(nèi)容,<switch> 的選中狀態(tài)),需要使用 :key 來指定列表中項目的唯一的標識符。

:key 的值以兩種形式提供

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

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

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

示例:

<template>
    <view>
        <!-- array 中 item 的某個 property -->
        <view v-for="(item,index) in objectArray" :key="item.id">
            {{index +':'+ item.name}}
        </view>
        <!-- item 本身是一個唯一的字符串或者數(shù)字時,可以使用 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 循環(huán)整數(shù)時和其他平臺存在差異,如 v-for="(item, index) in 10" 中,在H5平臺 item 從 1 開始,其他平臺 item 從 0 開始,可使用第二個參數(shù) index 來保持一致。
  • 在非H5平臺 循環(huán)對象時不支持第三個參數(shù),如 v-for="(value, name, index) in object" 中,index 參數(shù)是不支持的。

事件處理器

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

// 事件映射表,左側(cè)為 WEB 事件,右側(cè)為 ``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 的事件,也可以是一個空函數(shù)。<view class="mask" @touchmove.stop.prevent="moveHandle"></view>
  • 按鍵修飾符:uni-app運行在手機端,沒有鍵盤事件,所以不支持按鍵修飾符。

表單控件綁定

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

建議開發(fā)過程中直接使用 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發(fā)生change事件,攜帶value值為:', e.target.value)
    }
  }
}

</script>

v-html指令

App端(vue頁面V3編譯模式)和H5端支持v-html,其他端不支持v-html。

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


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號