乐趣区

关于javascript:使用-Vue3-开发小程序

前言

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

Vue3 的新个性次要有 Composition APITeleportFragments<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 为 teleportToastTeleport 组件,代码如下:

<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),不定时推送文章。

退出移动版