使用 Vue3 開發小程序
前言
9 月 19 日凌晨，Vue3 在通過多個開發版本的迭代後，終於迎來了它的正式版本，「One Piece」的代號也昭示了其開拓偉大航路的野心。css
Vue3 的新特性主要有 Composition API、Teleport、Fragments 和 <script setup /> & <style vars /> 等。咱們是否也能夠在小程序開發中使用這些特性呢？在 Taro 的文檔裏咱們找到了關於 Vue3 的章節，事不宜遲，讓咱們開始嘗試吧。html
Vue3 部分新特性
還沒了解過 Vue3 的同窗也別急，先了解下 Vue3 的新特性吧：vue
1. Composition API
Vue2.x 基於 Option API（選項 API ）構建組件，通常來講組件擁有 data、methods、computed 等選項。這是一種屬性相互隔離的模式，好處是各屬性內容分離開，對於新手來講比較友好；但對於大型項目來講，爲了修改某個功能，可能須要在一個文件中來回翻頁。Vue3 增長了 Composition API 方式（組合 API ），基於 reactivity（響應式）的思想進行組件構建，將邏輯封裝到函數中，能夠實現相似 React Hooks 的邏輯組合和重用。對於大型項目，代碼按照具體功能劃分，而不是分散在不一樣的生命週期中，邏輯更加一目瞭然。react
2. Teleport（傳入）
Teleport 功能，使得咱們能夠將全屏的組件（例如 Toast）移到 Vue APP 節點外，而不須要在 UI 界面上修改其餘組件樣式，方便實現全屏蒙層、浮層彈窗等效果。git
3. Fragments（碎片）
Vue2.x 版本中，<template /> 標籤下不支持放置多個組件，這個限制在 Vue3 中再也不存在。這點比較好理解，下述組件設計在 Vue3 中是沒有問題的：github
<!-- Layout.vue --> <template> <header>...</header> <main v-bind="$attrs">...</main> <footer>...</footer> </template>
4. 實驗性質的語法糖<script setup>、<style vars>
a.<script setup>:用於在 SFC 中使用 Composition API 的語法糖，改善在單個文件組件中使用 Composition API 時的體驗。shell
b.<style vars>: SFC 中狀態驅動的 CSS 變量，它提供了直接的 CSS 配置和封裝，支持將組件狀態驅動的CSS變量注入到「單個文件組件」樣式中。npm
除了以上 4 點以外，Vue3 還提供了自定義渲染，詳細能夠參考文末的推薦閱讀文章。小程序
如何在 Taro 裏使用 Vue3
Vue3 帶來的新特性可讓咱們更加優雅和高效地進行開發，如今，來開啓咱們在 Taro 裏使用 Vue3 的體驗之旅吧。微信小程序
Taro 已經默認安裝 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
將出現以下圖的一些選型：
如上圖：
- 請輸入項目名稱？輸入項目名稱
vuedemo - 請輸入項目介紹？輸入項目介紹
a demo project - 請選擇框架？固然是
Vue3啦 - 餘下選項，如上面 3 個選項，根據本身的須要選擇就好，不會有什麼問題
通常狀況下，依照提示選型好之後， Taro 會自動安裝依賴。若是因爲網絡問題致使安裝不成功，就須要手動在項目路徑下進行安裝。
# 使用 yarn 安裝依賴 $ yarn # OR 使用 cnpm 安裝依賴 $ cnpm install # OR 使用 npm 安裝依賴 $ npm install
安裝後目錄結構：
app 默認代碼以下，咱們注意到，Taro3 在新建 Vue3 項目時已經修改了入口組件寫法。
import { createApp } from 'vue'
import './app.scss'
const App = createApp({
onShow (options) {},
// 入口組件不須要實現 render 方法，即便實現了也會被 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
編譯後，打開微信開發者工具導入編譯後的 dist 目錄，首頁內容和編譯成 H5 的表現都以下圖：
驗證Taro3對Vue3的支持度
Composition API
寫個比較簡單的 todolist 計數組件，假設目前已有 4 項代辦事項，點擊後將新增一項。這裏會使用到 Composition API 思路，以及 computed 計算屬性。
在用戶點擊時，第二行「當前操做新增」會根據點擊次數遞增，總計條數會在 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發生改變時，會觸發計算total
const total = computed(() => count.value + existCount.value )
function increment() {
count.value++
}
onMounted(() => console.log('component mounted!'))
return {
// 返回increment方法，existCount、count、total屬性，供模板中調用
increment,
existCount,
count,
total,
}
}
}
</script>
頁面表現以下所示，可見對於 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 = true
}
const hideToast = ()=>{
toastFlag.value = 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 特性已經在上面的例子中獲得驗證，使用沒有問題。
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 = "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 = "change hello" + count.value
}
return {
count,
info,
incAndChangeInfo,
}
}
}
</script>
調用它的代碼傳入 mgs 以下：
<Setup msg="hello"/>
運行後，小程序和 H5 都是支持的，頁面總體表現以下：
能夠看到，運用新特性進行開發，代碼書寫更加便捷，邏輯更清晰。
style vars 語法糖
<style vars>，組件裏的代碼以下：
<template>
<view class="text">文字顏色爲{{ color }},點擊後變爲紅色</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>
調用它的頁面裏的代碼以下：
<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 = 'red'
}
return {
changeColor,
color
}
}
}
</script>
小程序和 H5 都沒有問題，功能效果以下：
結語
咱們將上述幾個 Demo 整合在一個項目中，放在Github上，有興趣的同窗能夠看看。在線預覽地址在這裏。
通過驗證，Taro3 支持使用最新的 Vue3 開發多端應用，相比之下 H5 的支持度更好一些。
值得一提的是，Taro 團隊在技術上一直保持進取，在 Taro 2.0 版本支持了 React Hooks ；根據Taro RFCS，早在 2020-06-03 也已經打算支持 Vue3 了。截至目前，Taro 對 Vue3 的支持在小程序端的稍有補足，但願 Taro 團隊能夠早日補足這個短板。
推薦文章：
參考文章：
- [1]Compsition API
- [2]Teleport
- [3]
<script setup> - [4]
<style vars> - [5]Taro3安裝及使用
歡迎關注凹凸實驗室博客：aotu.io
或者關注凹凸實驗室公衆號（AOTULabs），不定時推送文章。
- 1. 使用vscode開發微信小程序
- 2. 使用 React 開發小程序
- 3. 使用TypeScript開發微信小程序
- 4. 使用Taro框架開發小程序
- 5. 使用mpvue開發微信小程序
- 6. 在小程序開發中使用 npm
- 7. 使用mpvue開發小程序
- 8. 用webpack4開發小程序
- 9. 小程序開發
- 10. 京東 Vue3 組件庫 nutui 3.0 發佈，支持小程序開發
- 更多相關文章...
- • XML 應用程序 - XML 教程
- • 在Java程序中使用Redis - Redis教程
- • PHP開發工具
- • Git可視化極簡易教程 — Git GUI使用方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 使用vscode開發微信小程序
- 2. 使用 React 開發小程序
- 3. 使用TypeScript開發微信小程序
- 4. 使用Taro框架開發小程序
- 5. 使用mpvue開發微信小程序
- 6. 在小程序開發中使用 npm
- 7. 使用mpvue開發小程序
- 8. 用webpack4開發小程序
- 9. 小程序開發
- 10. 京東 Vue3 組件庫 nutui 3.0 發佈，支持小程序開發