🔥Исходное видео + видео с кратким анализом деревенского старосты Яна и дяди Рана

🔥Ю Цюй полная версия

⚡️Подписаться на официальный аккаунт [Front-end big bus] Ответить [vue] Запросить полный код

📺 Вступительные слова - ⚡Ткните меня ⚡

1. Почему стоит выбрать CompositionAPI

📺 Оригинал VueMastery

📺 Углубленная интерпретация дяди Рана и деревенского старосты Яна

1. Ограничения Vue2

• Плохая читаемость, вызванная раздуванием логики компонентов
• Невозможно повторно использовать код в компонентах
• Vue2 имеет ограниченную поддержку TS

Представьте, если мы напишем компонент, который содержит 🔍Search и sort еще две функции.

В традиционном OptionsAPI нам нужно разделить логику на следующие шесть частей.

OptionsAPI

• components
• props
• data
• computed
• methods
• lifecycle methods

Это заставит нас отредактировать логику и многократно перескакивать через код.

​

2. Как использовать CompositionAPI для решения проблемы

Лучшее решение — агрегировать логику для лучшей читабельности кода.

Это то, что позволяет наш синтаксис CompositionAPI. CompositionAPI — это совершенно необязательный синтаксис, который не конфликтует с исходным OptionAPI. Это позволяет нам группировать код с одинаковой функциональностью без необходимости захламлять все уголки optionAPI.

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

Нам все еще нужно разумно разделить страницу на компоненты.

3. Метод повторного использования кода PK

Чтобы повторно использовать код в компонентах Vue2, у нас, вероятно, есть четыре варианта.

3.1 Миксин - миксин

Смешивание кода на самом деле является режимом смешивания в шаблонах проектирования, и его недостатки также очень очевидны.

Это можно понимать как множественное наследование, то есть просто то, как у человека есть два отца.

​

​ ❌ Конфликтов имен атрибутов не избежать - у кого длинный нос

​ ❌Отношения наследования не ясны

3.2 Фабрика миксинов - Фабрика миксинов

вернуть

✅ Простое повторное использование кода

✅Очистка наследственных отношений

3.3 ScopeSlots — Слоты области действия

• ❌ Не очень читабельно
• ❌Сложная конфигурация - необходимо настроить в шаблоне
• ❌ Низкая производительность - каждый сокет эквивалентен одному экземпляру

3.4 CompositionApi — API композиции

• ✅ Меньше кода
• ✅ Не вводится новый синтаксис, только простые функции
• ✅Чрезвычайно гибкий
• ✅Подсказки синтаксиса инструмента удобны - поскольку это простая функция, легко реализовать подсказки синтаксиса и автоматическую компенсацию

2. установка и ссылка

📺 Оригинал VueMastery

📺 Углубленная интерпретация дяди Рана и деревенского старосты Яна

1. Причины использования CompositionAPI

• ✅ Улучшенная поддержка машинописного текста
• ✅В сложных функциональных компонентах код может быть организован по фичам - связность кода👍 Например: связность логики сортировки и поиска
• ✅ Повторное использование кода между компонентами

2. Что такое настройка

• Выполнять перед следующими методами:
  • Components
  • Props
  • Data
  • Methods
  • Computed Properties
  • Lifecycle methods
• Это нормально не использовать непонятное this
• Есть два необязательных параметра
  • props - свойства (реактивный объект и наблюдаемый)

import {watch} from "vue"
export defalut {
	props: {
		name: String
	},
	setup(props) {
		watch(() => {
			console.log(props.name)
		})
	}
}

• объект контекста контекста — используется вместо свойств, доступных предыдущим методом this

  setup (props,context) {
  	const {attrs,slots,parent,root,emit} = context
  }
  

3. Что такое реф.

Это оборачивает наш примитив в объект, позволяющий отслеживать.

Операции упаковки для данных базового типа данных создают объект ответа, который отслеживает изменения данных.

4. Резюме

Значительно улучшенная ремонтопригодность

• Может контролировать, какие переменные выставляются

• Может отслеживать, какие свойства определены (наследование свойств и ссылочная прозрачность)

3. Методы

📺 Оригинал VueMastery

📺 Углубленная интерпретация дяди Рана и деревенского старосты Яна

1. Основное использование

Способ добавления следующий:

2. Резюме автоматической распаковки

• JS: необходимо получить доступ к объекту-оболочке через .value
• Шаблон: Автоматическая распаковка

4. Вычислено — Вычисленные свойства

📺 Оригинал VueMastery

📺 Углубленная интерпретация дяди Рана и деревенского старосты Яна

Об этом месте сказать особо нечего, и оно не изменилось с Vue2.

<template>
  <div>
    <div>Capacity： {{ capacity }}</div>
    <p>Spases Left: {{ sapcesLeft }} out of {{ capacity }}</p>
    <button @click="increaseCapacity()">Increase Capacity</button>
  </div>
</template>

<script>

import { ref, computed, watch } from "vue";
export default {
  setup(props, context) {
    const capacity = ref(3);
    const attending = ref(["Tim", "Bob", "Joe"]);
    function increaseCapacity() {
      capacity.value++;
    }
    const sapcesLeft = computed(() => {
      return capacity.value - attending.value.length;
    });
    return { capacity, increaseCapacity, attending, sapcesLeft };
  },
};
</script>

5. Reactive — реактивный синтаксис

📺 Оригинал VueMastery

📺 Углубленная интерпретация дяди Рана и деревенского старосты Яна

Предыдущий реактивный Ref для объявления всех реактивных свойств

import { ref,computed } from 'vue'
export default {
  setup(){
    const capacity = ref(4);
    const attending = ref(["Tim","Bob","Joe"]);
    const spacesLeft = computed(()=>{
      return capacity.value - attending.value.length
    })
    function increaseCapacity(){ capacity.value ++;}
    return { capacity,increaseCapacity,attending,spacesLeft}
  }
}

Но есть и другой эквивалентный способ использовать его вместо реактивного Ref.

import { reactive,computed } from 'vue'
export default {
  setup(){
    const event = reactive({
      capacity:4,
      attending:["Tim","Bob","Joe"],
      spacesLeft:computed(()=>{
        return event.capacity - event.attending.length;
      })
    })
  }
}

В прошлом мы использовали DATA Vue 2.0 для объявления отзывчивых объектов, но теперь каждое свойство здесь является ответом, включая вычисляемые вычислительные свойства.

Эти два метода не используются по сравнению с первым.

Затем мы объявляем метод, что оба синтаксиса в порядке, в зависимости от того, какой из них вы выберете.

setup(){
  const event = reactive(){
    capacity:4,
    attending:["Tim","Bob","Joe"],
    spacesLeft:computed(()=>{
      return event.capacity - event.attending.length;
    })
    function increaseCapacity(){event.capacity++}
    //return整个对象
    return {event,increaseCapacity}
  }
}

<p>Spaces Left:{{event.spacesLeft}} out of {{event.capacity}}</p>
<h2>Attending</h2>
<ul>>
	<li v-for="(name,index) in event.attending" :key="index">
     {{name}}
  </li>
</ul>
<button @click="increaseCapacity()"> Increase Capacity</button>

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

//在这里可以使用toRefs
import {reactive,computed,toRefs} from 'vue'
export default{
  setup(){
    const event = reactive({
      capacity:4,
      attending:["Tim","Bob","Joe"],
      spacesLeft:computed(()=>{
        return event.capacity -event.attending.length;
        
      })
    })
    function increaseCapacity(){ event.capacity ++ }
    return {...toRefs(event),increaseCapacity}
  }
}

Если нет метода увеличения емкости (), его можно упростить непосредственно до

return toRefs(event)

полный код

<div>
   <p>Space Left : {{event.spacesLeft}} out of {{event.capacity}} </p>
   <h2>Attending</h2>
   <ul>
      <li v-for="(name,index)" in event.attending :key="index">{{name}}
      </li>


​     
   </ul>
   <button @click="increaseCapacity">Increase Capacity</button>
   </div>
</template>

<script>
//第一种
import {ref,computed } from 'vue'
export default {
  setup(){
    const capacity = ref(4)
    const attending = ref(["Tim","Bob","Joe"])
    const spaceLeft = computed(()=>{
      return capacity.value - attending.value.length;
    });
    function increaseCapacity(){ capacity.value++; }
    return {capacity,increaseCapacity,attending,spaceLeft}   


  }
} 

//返回一个响应式函数 第二种
import { reactive,computed } from 'vue'
export default {
  setup(){
    const event = reactive({
      capacity:4,
      attending:["Tim","Bob","Joe"],
      spaceLeft:computed(()=>{
        return event.capacity - event.attending.length;
      })
    })
    //我们不再使用.value
    function increaseCapacity() { event.capacity++; }
    //把这个event放入到template中
    return { event,increaseCapacity}
  }
}


</script>

6. Модульность

📺 Оригинал VueMastery

📺 Углубленная интерпретация дяди Рана и деревенского старосты Яна

Две причины использовать CompositionAPI

• Код может быть организован по функциям

  

• Повторное использование функционального кода между компонентами

Seven, LifecycleHooks — крючки жизненного цикла

📺 Оригинал VueMastery

📺 Углубленная интерпретация дяди Рана и деревенского старосты Яна

Vue2	Vue3
beforeCreate	❌настройка (альтернатива)
created	❌настройка (альтернатива)
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
errorCaptured	onErrorCaptured
	🎉onRenderTracked
	🎉onRenderTriggered

Вызов хуков жизненного цикла в настройках

import { onBeforeMount,onMounted } from "vue";
export default {
  setup() {
    onBeforeMount(() => {
        console.log('Before Mount!')
    }) 
    onMounted(() => {
        console.log('Before Mount!')
    }) 
  },
};

Восемь, смотреть - слушатель

📺 Оригинал VueMastery

📺 Углубленная интерпретация дяди Рана и деревенского старосты Яна

// 所有依赖响应式对象监听
watchEffect(() => {
   results.value = getEventCount(searchInput.value);
 });

// 特定响应式对象监听
watch(
  searchInput,
  () => {
    console.log("watch searchInput:");
  }
);

// 特定响应式对象监听 可以获取新旧值
watch(
  searchInput,
 (newVal, oldVal) => {
    console.log("watch searchInput:", newVal, oldVal);
  },
);

// 多响应式对象监听
watch(
  [firstName,lastName],
 ([newFirst,newLast], [oldFirst,oldlast]) => {
   // .....
  },
  
);

// 非懒加载方式监听 可以设置初始值
watch(
  searchInput,
  (newVal, oldVal) => {
    console.log("watch searchInput:", newVal, oldVal);
  },
  {
    immediate: true, 
  }
);

Девять, состояние совместного использования — общее состояние

📺 Оригинал VueMastery

📺 Углубленная интерпретация дяди Рана и деревенского старосты Яна

Требования для написания публичной функции usePromise следующие:

• results : возвращает результат выполнения промиса

• loading: Вернуться в рабочее состояние Promise

  • PENDING :true
  • REJECTED : false
  • RESOLVED: false

• error : вернуть ошибку выполнения

import { ref } from "vue";

export default function usePromise(fn) {
  const results = ref(null);
  // is PENDING
  const loading = ref(false);
  const error = ref(null);

  const createPromise = async (...args) => {
    loading.value = true;
    error.value = null;
    results.value = null;
    try {
      results.value = await fn(...args);
    } catch (err) {
      error.value = err;
    } finally {
      loading.value = false;
    }
  };
  return { results, loading, error, createPromise };
}

заявление

import { ref, watch } from "vue";
import usePromise from "./usePromise";
export default {
  setup() {
    const searchInput = ref("");
    function getEventCount() {
      return new Promise((resolve) => {
        setTimeout(() => resolve(3), 1000);
      });
    }

    const getEvents = usePromise((searchInput) => getEventCount());

    watch(searchInput, () => {
      if (searchInput.value !== "") {
        getEvents.createPromise(searchInput);
      } else {
        getEvents.results.value = null;
      }
    });

    return { searchInput, ...getEvents };
  },
};

10. Саспенс - Саспенс

📺 Оригинал VueMastery

📺 Углубленная интерпретация дяди Рана и деревенского старосты Яна

1. Реализация комплексной загрузки

Рассмотрим, как отображать статус загрузки при загрузке удаленного

Обычно мы можем использовать V-если в шаблоне

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


2. Базовая грамматика приостановки

У этой проблемы есть новый обходной путь в Vue3.

Это компонент саспенса, компонент саспенса.

<template>
  <div>
    <div v-if="error">Uh oh .. {{ error }}</div>
    <Suspense>
      <template #default>
        <div>
          <Event />
          <AsyncEvent />
        </div>
      </template>
      <template #fallback> Loading.... </template>
    </Suspense>
  </div>
</template>

<script>
import { ref, onErrorCaptured, defineAsyncComponent } from "vue";

import Event from "./Event.vue";

const AsyncEvent = defineAsyncComponent(() => import("./Event.vue"));
export default {
  components: {
    Event,
    AsyncEvent,
  },

  setup() {
    const error = ref(null);
    onErrorCaptured((e) => {
      error.value = e;
      // 阻止错误继续冒泡
      return true;
    });
    return { error };
  },
};
</script>

3. Реализация скелетного экрана

Одиннадцать, Телепорт - Портал

📺 Оригинал VueMastery

📺 Углубленная интерпретация дяди Рана и деревенского старосты Яна

1. Функция

Подобно порталу в React, вы можете отправить определенный HTML-шаблон в любое место в Доме.

2. Базовая грамматика

Настраивается через селектор QuerySelector

3. Пример кода

<template>
  <div>
    <teleport to="#end-of-body" :disabled="!showText">
      <!-- 【Teleport : This should be at the end 】 -->
      <div>
        <video src="../assets/flower.webm" muted controls="controls" autoplay="autoplay" loop="loop">
          
        </video>
      </div>
    </teleport>
    <div>【Teleport : This should be at the top】</div>
    <button @click="showText = !showText">Toggle showText</button>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    const showText = ref(false);
    setInterval(() => {
      showText.value = !showText.value;
    }, 1000);
    return { showText };
  },
};
</script>

Подписаться на Full Stack Uncle Ran

⚡️Подписаться на официальный аккаунт [Front-end big bus] Ответить [vue] Запросить полный код

Последние статьи (Спасибо за вашу поддержку и поддержку 🌹🌹🌹)

• 🔥 39-летний мужчина спешит на дорогу | Ежегодный очерк Nuggets98 лайков
• 🔥 Element3 Development Insider — разработка плагина Vue CLI167 лайков
• 🔥 Каждый день делает серию колес500+ лайков
• 🔥 Итоги глобальной конференции по галантерее Vue3.0267 лайков

Добро пожаловать в Paizhuan, давайте вместе обсудим более элегантную реализацию