Разрабатывайте небольшие программы с помощью Vue3.

предисловие

Ранним утром 19 сентября Vue3, наконец, представила свою официальную версию после нескольких итераций версий для разработки Кодовое название «One Piece» также показывает его стремление разработать отличный маршрут.

Новые функции Vue3 в основномComposition API,Teleport,Fragmentsа также<script setup /> & <style vars />Ждать. Можем ли мы также использовать эти функции в разработке апплета? В документации Таро мы нашлиГлава о Vue3, без лишних слов, приступим.

Некоторые новые функции Vue3

Студенты, которые не знакомы с Vue3, не беспокойтесь, давайте сначала разберемся с новыми функциями Vue3:

1. Composition API

Vue2.x основан наOption API（选项 API ）Компоненты сборки.Вообще говоря, компоненты имеют такие параметры, как данные, методы и вычисляемые. Это режим, в котором атрибуты изолированы друг от друга.Преимущество в том, что содержимое каждого атрибута отделено, что удобно для новичков, но для больших проектов, чтобы изменить функцию, может потребоваться перелистывание страниц. туда и обратно в файле. Vue3 добавляетComposition API 方式（组合 API ）, на основеreactivity（响应式）Идея построения компонентов и инкапсуляции логики в функции позволяет достичь логической композиции и повторного использования, аналогичного React Hooks. Для больших проектов код разбит по конкретным функциям, а не разбросан по разным жизненным циклам, логика более понятна с первого взгляда.

2. Телепорт (входящий)

Функция Teleport позволяет нам перемещать полноэкранные компоненты (такие как Toast) за пределы узла приложения Vue без изменения стилей других компонентов в интерфейсе пользовательского интерфейса, что облегчает реализацию полноэкранного маскирования, всплывающих окон с плавающим слоем и другие эффекты.

3. Фрагменты

В версии 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>: для использования в SFCComposition APIсинтаксический сахар для улучшения работы при использовании Composition API в одном файловом компоненте.

b.<style vars>: Переменные CSS, управляемые состоянием в SFC, который обеспечивает прямую настройку и инкапсуляцию CSS, поддерживает внедрение переменных CSS, управляемых состоянием компонента, в стили «однофайлового компонента».

В дополнение к вышеупомянутым 4 пунктам Vue3 также обеспечивает пользовательский рендеринг.Подробности см. в рекомендуемой к прочтению статье в конце этой статьи.

Как использовать Vue3 в Таро

Новые функции, представленные Vue3, позволяют нам разрабатывать более элегантно и эффективно.Теперь давайте начнем наш опыт использования Vue3 в Taro.

В 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>

Скомпилируйте и запустите апплет WeChat

npm run dev:weapp

После компиляции откройте инструмент разработчика WeChat и импортируйте скомпилированныйdistСодержимое каталога, домашней страницы и скомпилированного в H5 следующее:

Убедитесь, что Taro3 поддерживает Vue3

Composition API

Напишите относительно простым подсчете для подсчета TodoList, предполагая, что в настоящее время имеются 4 элемента TOODO, а появится новый элемент после нажатия. будет использоваться здесь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, мы запишем свойство как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>, код в компоненте выглядит следующим образом:

<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 поддерживается производительность всей страницы следующим образом:

Видно, что использование новых возможностей для разработки делает написание кода более удобным, а логику — более понятной.

стиль 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 проблем нет, а функциональные эффекты следующие:

Эпилог

Мы будем интегрировать вышеуказанные несколько демо в проекте, наGithubВыше заинтересованные студенты могут взглянуть. Адрес онлайн-предварительного просмотра находится по адресуздесь.

Было подтверждено, что Taro3 поддерживает разработку мультитерминальных приложений с использованием последней версии Vue3, по сравнению с лучшей поддержкой H5.

Стоит отметить, что команда Taro была технически агрессивной и поддерживала React Hooks в Taro 2.0.Taro RFCS,уже2020-06-03Также есть планы по поддержке Vue3. На данный момент поддержка Taro для Vue3 немного дополнена со стороны апплета, и я надеюсь, что команда Taro сможет восполнить этот недостаток как можно скорее.

рекомендуемая статья:

• Vue3 против хуков React
• SWR
• Применение пользовательского рендерера

Справочная статья:

• [1]Compsition API
• [2]Teleport
• [3]<script setup>
• [4]<style vars>
• [5]Установка и использование Taro3