Используйте новые функции Vue 3.0 заранее, попробуйте vue-function-api

Vue.js

открывалка

Прошел почти год с момента анонса Vue 3.0. В этом месяце на конференции Vue Conf Ю Юйси опубликовал самый важный документ RFC для Vue 3.0, Function-based API, который поставили под сомнение многие мелкие партнеры. В связи с этим тоже хочу узнать, какие изменения может принести такой апгрейд.

Так получилось, что команда разработчиков VueJs выпустила плагин vue-function-api на основе Vue 2.0, который можно использовать для первых пользователей function-api на Vue 2.0. надо попробовать.

Talk is less, show me the code.

Пример

<template>
  <div id="app">
    {{time.getHours() + ':' + time.getMinutes() + ':' + time.getSeconds()}}
  </div>
</template>
<script lang="ts">
  import {interval} from 'rxjs/observable/interval';
  import {value as Wrapper} from 'vue-function-api';

  const time = Wrapper(new Date());
  interval(100).pipe().subscribe(() => {
    time.value = new Date();
  });

  export default {
    setup() {
      return {time};
    }
  };
</script>

Разобрать

Выше приведен пример кода, который просто отображает текущее время на основе API-функции.Что касается того, почему изменение представления может быть вызвано внешним изменением переменной, я считаю, что партнеры, которые обращают внимание на API-функции, должны все это очистить. вопрос, так что я не буду говорить больше.

Видно, что код определения переменных и модификации переменных объявлен вне объекта свойства компонента, для наглядности он вынесен в тот же файл, на самом деле эту часть кода можно извлечь:

Создайте новый файл time.ts

import {value as Wrapper} from 'vue-function-api';
import {interval} from 'rxjs/observable/interval';

const time = Wrapper(new Date());
interval(100).pipe().subscribe(() => {
  time.value = new Date();
});

export default time;

На данный момент остается только файл Vue:

<template>
  <div id="app">
    {{time.getHours() + ':' + time.getMinutes() + ':' + time.getSeconds()}}
  </div>
</template>
<script lang="ts">
  import time from './time';

  export default {
    setup() {
      return {time};
    }
  };
</script>

Отлично работает

Таким образом, мы можем ввести объект времени в различные компоненты, которые должны отображать текущее время, и это нормально отображать его.

Я полагаю, что у многих друзей здесь есть некоторые идеи в их сердцах.Разве это не функция vuex? Да, это реализация глобальных общих данных, точно такая же, как с использованием vuex, но более гибкая, чем vuex, и мы можем реализовать управление состоянием без дополнительных плагинов управления состоянием.

watch

Прочитав вышеизложенную часть, я считаю, что у всех есть определенное понимание метода проектирования function-api, тогда давайте взглянем на часы.

Есть нарекания по поводу часов Vue2.0, то есть путь, который нужно смотреть, представляет собой строку, что очень хлопотно в обслуживании (например, рефакторинге), если используется метод объектной ссылки, то такого нет проблема.

const api = require('vue-function-api');
const Vue = require('vue');
const { interval } = require('rxjs/observable/interval');
Vue.use(api.plugin);
const value = api.value(new Date());
api.watch(() => value.value, (val, old) => {
  if (old && val.getSeconds() !== old.getSeconds()) {
    console.log(`seconds changed from ${old.getSeconds()} to ${val.getSeconds()}`);
  }
});
interval(100)
    .pipe()
    .subscribe(() => {
      value.value = new Date();
    });

Приведенный выше код можно запускать напрямую js, сборку тоже можно пилить.

Сегодня я в основном рассказываю о простой попытке, а что касается сценариев использования function-api, то нам еще предстоит изучить их на практике. А плагин function-api Vue2.0 не рекомендуется использовать в продакшене, будем ждать официального релиза 3.0.

Категории