9 月 19 日凌晨，Vue3 在經(jīng)過多個開發(fā)版本的迭代后，終于迎來了它的正式版本，「One Piece」的代號也昭示了其開拓偉大航路的野心。

Vue3 的新特性主要有 Composition API、Teleport、Fragments 和 <script setup /> & <style vars /> 等。我們是否也可以在小程序開發(fā)中使用這些特性呢？在 Taro 的文檔里我們找到了關于 Vue3 的章節(jié)，事不宜遲，讓我們開始嘗試吧。

Vue3 部分新特性

還沒了解過 Vue3 的同學也別急，先了解下 Vue3 的新特性吧：

1. Composition API

Vue2.x 基于 Option API（選項 API ）構建組件，一般來說組件擁有 data、methods、computed 等選項。這是一種屬性相互隔離的模式，好處是各屬性內(nèi)容分離開，對于新手來說比較友好；但對于大型項目來說，為了修改某個功能，可能需要在一個文件中來回翻頁。Vue3 增加了 Composition API 方式（組合 API ），基于 reactivity（響應式）的思想進行組件構建，將邏輯封裝到函數(shù)中，可以實現(xiàn)類似 React Hooks 的邏輯組合和重用。對于大型項目，代碼按照具體功能劃分，而不是分散在不同的生命周期中，邏輯更加一目了然。

2. Teleport（傳入）

Teleport 功能，使得我們可以將全屏的組件（例如 Toast）移到 Vue APP 節(jié)點外，而不需要在 UI 界面上修改其他組件樣式，方便實現(xiàn)全屏蒙層、浮層彈窗等效果。

3. Fragments（碎片）

Vue2.x 版本中，<template /> 標簽下不支持放置多個組件，這個限制在 Vue3 中不再存在。這點比較好理解，下述組件設計在 Vue3 中是沒有問題的：

<!-- Layout.vue -->
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

4. 實驗性質(zhì)的語法糖<script setup>、<style vars>

a.<script setup>:用于在 SFC 中使用 Composition API 的語法糖，改善在單個文件組件中使用 Composition API 時的體驗。

b.<style vars>: SFC 中狀態(tài)驅(qū)動的 CSS 變量，它提供了直接的 CSS 配置和封裝，支持將組件狀態(tài)驅(qū)動的CSS變量注入到“單個文件組件”樣式中。

除了以上 4 點之外，Vue3 還提供了自定義渲染，詳細可以參考文末的推薦閱讀文章。

如何在 Taro 里使用 Vue3

Vue3 帶來的新特性可以讓我們更加優(yōu)雅和高效地進行開發(fā)，現(xiàn)在，來開啟我們在 Taro 里使用 Vue3 的體驗之旅吧。

Taro 已經(jīng)默認安裝 Taro3 ，所以正常安裝即可：

# 使用 npm 安裝 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安裝 CLI
$ yarn global add @tarojs/cli
# OR 安裝了 cnpm，使用 cnpm 安裝 CLI
$ cnpm install -g @tarojs/cli

安裝完成之后，使用 taro --version 查看一下是否安裝成功，如果輸出版本號說明安裝成功。
安裝成功后，初始化一個項目

$ taro init

將出現(xiàn)如下圖的一些選型：

如上圖：

1. 請輸入項目名稱？輸入項目名稱 vuedemo
2. 請輸入項目介紹？輸入項目介紹 a demo project
3. 請選擇框架？當然是 Vue3 啦
4. 余下選項，如上面 3 個選項，根據(jù)自己的需要選擇就好，不會有什么問題

一般情況下，依照提示選型好以后， Taro 會自動安裝依賴。如果由于網(wǎng)絡問題導致安裝不成功，就需要手動在項目路徑下進行安裝。

# 使用 yarn 安裝依賴
$ yarn
# OR 使用 cnpm 安裝依賴
$ cnpm install
# OR 使用 npm 安裝依賴
$ npm install

安裝后目錄結(jié)構：

app 默認代碼如下，我們注意到，Taro3 在新建 Vue3 項目時已經(jīng)修改了入口組件寫法。

import { createApp } from 'vue'
import './app.scss'
const App = createApp({
  onShow (options) {},
  // 入口組件不需要實現(xiàn) render 方法，即使實現(xiàn)了也會被 taro 所覆蓋
})
export default App

page/index 目錄下 index 文件示例如下：

<template>
  <view class="index">
    <text>{{ msg }}</text>
  </view>
</template>

<script>
import { ref } from 'vue'
import './index.scss'
export default {
  setup () {
    const msg = ref('Hello world')
    return {
      msg
    }
  }
}
</script>

編譯運行微信小程序

npm run dev:weapp

編譯后，打開微信開發(fā)者工具導入編譯后的 dist 目錄，首頁內(nèi)容和編譯成 H5 的表現(xiàn)都如下圖：

驗證Taro3對Vue3的支持度

Composition API

寫個比較簡單的 todolist 計數(shù)組件，假設目前已有 4 項代辦事項，點擊后將新增一項。這里會使用到 Composition API 思路，以及 computed 計算屬性。

在用戶點擊時，第二行“當前操作新增”會根據(jù)點擊次數(shù)遞增，總計條數(shù)會在 4 的基礎上累加。

<template>
  <button @tap="increment">
    增加 1
  </button>
  <view>當前todolist事項已有：{{ existCount }}條；</view>
  <view>當前操作已新增：{{ count }} ，共有{{ total }}條。</view>
</template>
<script>
import { ref, computed, onMounted, toRefs, watch } from 'vue'
export default {
  name: 'case1',
  setup(props) {
    // ref響應式變量
    const count = ref(0)
    const existCount = ref(4)
    // computed方法，在count的value發(fā)生改變時，會觸發(fā)計算total
    const total = computed(() => count.value + existCount.value )
    function increment() {
      count.value++
    }
    
    onMounted(() => console.log('component mounted!'))
    
    return {
      // 返回increment方法，existCount、count、total屬性，供模板中調(diào)用
      increment,
      existCount,
      count,
      total,
    }
  }
}
</script>

頁面表現(xiàn)如下所示，可見對于 Composition API 的支持的還是不錯的。

Teleport

寫個初次登錄用戶的歡迎彈窗。用戶名從 index.vue 傳入。首頁代碼如下：

<template>
  <view class="index">
    <Toast :user = username />
    <view id="teleportToast"></view>
  </view>
</template>

在 Toast.vue 中，我們會寫個屬性 to 為 teleportToast 的 Teleport 組件，代碼如下：

<template>
  <button @tap="showToast" class="btn">打開彈窗</button>  
  <!-- to和index.html中的view id一致 -->
  <teleport to="#teleportToast">
    <view v-if="toastFlag" class="toast__wrap"  @tap="hideToast">
      <view class="h2">彈窗標題：</view>
      <view class="toast__wrap--msg">歡迎{{ user }}，點擊關閉</view>
    </view>
  </teleport>
</template>
<script>
import { ref,toRefs } from 'vue';
export default {
  props:{
    user: {type: String}
  },
  setup(props) {
    // 獲取用戶名
    const { user } = toRefs(props)
    // Toast：顯示flag
    const toastFlag = ref(false)
    let timer
    const showToast = ()=>{
      toastFlag.value = http://www.wxapp-union.com/true
    }
    const hideToast = ()=>{
      toastFlag.value = http://www.wxapp-union.com/false
    }
    return {
      user,
      toastFlag,
      showToast,
      hideToast,
    }
  }
}
</script>
<style lang="scss">
.toast__wrap{
  position: fixed;
  width:100%;
  height: 100%;
  background: rgba(0,0,0,.8);
  top: 0;
  left: 0;
  z-index: 101;
  color: #fff;
  .h2{
    margin: 20px;
  }
  &--msg{
    text-align: center;
  }
}
</style>

在 H5 下是正常顯示的，彈窗展示以及關閉功能效果如下；在小程序上卻報錯了，Taro 團隊還需要加把勁：

Fragments

Fragments 特性已經(jīng)在上面的例子中得到驗證，使用沒有問題。

script setup 語法糖

我們嘗試一下 <script setup>，組件里的代碼如下：

<template>
  <view>
    <view>count:{{ count }},msg:{{ info }}</view>
    <button @tap="incAndChangeInfo">
      增加 1修改msg
    </button>
  </view>
</template>
<script setup=" props ">
  import { ref, toRefs } from 'vue'
  export default{
    props: {
      msg: String,
    },
  }
  export const count = ref(0)
  export const info = ref(props.msg)
  export const incAndChangeInfo = () => {
    count.value++
    info.value = http://www.wxapp-union.com/"change hello" + count.value
  }
</script>

上述 script 標簽里的代碼效果等同于下面：

<script>
import { ref, toRefs } from 'vue'
export default {
  props: {
    msg: String,
    },
  setup(props) {
  const count = ref(0)
  const info = ref(props.msg)
  const incAndChangeInfo = () => {
    count.value++
    info.value = http://www.wxapp-union.com/"change hello" + count.value
    }
  return {
    count,
    info,
    incAndChangeInfo,
    }
  }
}
</script>

調(diào)用它的代碼傳入 mgs 如下：

<Setup msg="hello"/>

運行后，小程序和 H5 都是支持的，頁面整體表現(xiàn)如下：

可以看到，運用新特性進行開發(fā)，代碼書寫更加便捷，邏輯更清晰。

style vars 語法糖

<style vars>，組件里的代碼如下：

<template>
  <view class="text">文字顏色為{{ color }},點擊后變?yōu)榧t色</view>
</template>
<script>
import { ref,toRefs } from 'vue'
export default {
  props:{
    color: {type: String}
  },
   data(props) {
    return {
      color: ref(props) //'red'
    }
  },
  setup(props){
    const { color } = toRefs(props)
    return {
      color,
    }
  }
}
</script>
<style vars="{ color }">
.text {
  color: var(--color);
}
</style>

調(diào)用它的頁面里的代碼如下：

<template>
  <view class="index">
    <Styledemo :color = color @tap="changeColor"/>
  </view>
</template>
<script>
import { ref, computed, onMounted, toRefs, watch } from 'vue'
import Styledemo from "@/floors/styledemo"
export default {
  components:{
    Styledemo
  },
  setup () {
    const color = ref('blue')
    const changeColor = ()=>{
      color.value = http://www.wxapp-union.com/'red'
    }
    return {
      changeColor,
      color
    }
  }
}
</script>

小程序和 H5 都沒有問題，功能效果如下：

結(jié)語

我們將上述幾個 Demo 整合在一個項目中，放在Github上，有興趣的同學可以看看。在線預覽地址在這里。

經(jīng)過驗證，Taro3 支持使用最新的 Vue3 開發(fā)多端應用，相比之下 H5 的支持度更好一些。

值得一提的是，Taro 團隊在技術上一直保持進取，在 Taro 2.0 版本支持了 React Hooks ；根據(jù)Taro RFCS，早在 2020-06-03 也已經(jīng)打算支持 Vue3 了。截至目前，Taro 對 Vue3 的支持在小程序端的稍有補足，希望 Taro 團隊可以早日補足這個短板。