Как мне понять настройку api композиции? - PullRequest
Новая
       69

Как мне понять настройку api композиции?

0 голосов
/ 04 августа 2020

Что делает значение return функции настройки? 

const Comp = defineComponent({
    props: {
        count: {
          default: 0
        }
    },
    setup(props) {
        return () => props.count;
    }
})

1 Ответ

0 голосов
/ 04 августа 2020

В настоящее время v2 из Vue. js использует API на основе параметров - с использованием параметров data, methods и computed. Хотя этот API отлично подходит для создания компонентов, на самом деле он приводит к фрагментации Business logi c на различные блоки кода. Кроме того, вы не можете просто повторно использовать некоторые параметры одного компонента в другом компоненте. Например, предположим, что у вас есть набор методов, которыми вы должны поделиться с другим компонентом, который может работать только с наследованием или миксинами, которые не просты и интуитивно понятны в использовании.

Composition API, т.е. с использованием нового метода жизненного цикла setup точно решает проблему. Он помогает вам определять реактивные свойства, методы и вычисленные свойства компонентов, используя эти реактивные свойства в рамках одной обычной JavaScript функции без каких-либо магических c. Указатель this не используется в методе setup. И, таким образом, функция setup может быть извлечена за пределы компонента и повторно использована в различных компонентах. 

<template>
  <button @click="increment">
    Count is: {{ count }}, double is {{ double }}, click to increment.
  </button>
</template>

<script>
import { ref, computed, onMounted } from 'vue'

function useCounter() {

  // 1. Reactive property
  // Similar to one returned from `data` function
  const count = ref(0);

  // 2. Computed property
  const double = computed(() => count.value * 2);

  // 3. Methods
  function increment() {
    count.value++;
  }

  // 4. Lifecycle methods
  onMounted(() => console.log('component mounted!'));

  // Return the context object containing all/some 
  // of the 4 types of values
  return {
    count,
    double,
    increment
  };
}

export default {
  setup() {

    const reactiveContext = useCounter();

    return reactiveContext;
  }
}
</script>

Проверьте функцию useCounter. Он находится вне компонента и используется как часть компонента счетчика с использованием метода setup. Все реквизиты, возвращаемые setup, доступны в экземпляре компонента и могут использоваться непосредственно внутри шаблона.

Воспользуйтесь этой ссылкой - https://composition-api.vuejs.org/, чтобы узнать больше об API композиции.

...