前言

9 月 19 日凌晨，Vue3 在通过多个开发版本的迭代后，终于迎来了它的正式版本，「One Piece」的代号也昭示了其开辟平凡航路的野心。

Vue3 的新个性次要有 Composition API、Teleport、Fragments 和 <script setup /> & <style vars /> 等。咱们是否也能够在小程序开发中应用这些个性呢？在 Taro 的文档里咱们找到了对于 Vue3 的章节，事不宜迟，让咱们开始尝试吧。

Vue3 局部新个性

还没理解过 Vue3 的同学也别急，先理解下 Vue3 的新个性吧：

1. Composition API

Vue2.x 基于 Option API（选项 API ）构建组件，一般来说组件领有 data、methods、computed 等选项。这是一种属性互相隔离的模式，益处是各属性内容分来到，对于老手来说比拟敌对；但对于大型项目来说，为了批改某个性能，可能须要在一个文件中来回翻页。Vue3 减少了 Composition API 形式（组合 API ），基于 reactivity（响应式）的思维进行组件构建，将逻辑封装到函数中，能够实现相似 React Hooks 的逻辑组合和重用。对于大型项目，代码依照具体性能划分，而不是扩散在不同的生命周期中，逻辑更加高深莫测。

2. Teleport（传入）

Teleport 性能，使得咱们能够将全屏的组件（例如 Toast）移到 Vue APP 节点外，而不须要在 UI 界面上批改其余组件款式，不便实现全屏蒙层、浮层弹窗等成果。

3. Fragments（碎片）

Vue2.x 版本中，<template /> 标签下不反对搁置多个组件，这个限度在 Vue3 中不再存在。这点比拟好了解，下述组件设计在 Vue3 中是没有问题的：

<!-- 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 时的体验。

b.<style vars>: SFC 中状态驱动的 CSS 变量，它提供了间接的 CSS 配置和封装，反对将组件状态驱动的CSS变量注入到“单个文件组件”款式中。

除了以上 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

将呈现如下图的一些选型：

如上图：

  1. 请输出项目名称？输出项目名称 vuedemo
  2. 请输出我的项目介绍？输出我的项目介绍 a demo project
  3. 请抉择框架？当然是 Vue3 啦
  4. 余下选项，如下面 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 团队能够早日补足这个短板。

举荐文章：

  • Vue3 和 React Hooks比照
  • SWR
  • 自定义渲染器的利用

参考文章：

  • [1]Compsition API
  • [2]Teleport
  • [3]<script setup>
  • [4]<style vars>
  • [5]Taro3装置及应用

欢送关注凹凸实验室博客：aotu.io

或者关注凹凸实验室公众号（AOTULabs），不定时推送文章。