Vue Academy · Ders

Üst Düzey Bileşen (HOC) Kalıbı

Bileşenleri HOC'lerle sarmalama, props ve slot'ları aktarma, HOC yerine composable'ın ne zaman kullanılacağı.

Üst Düzey Bileşen (HOC) Kalıbı, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Üst Düzey Bileşen Nedir

Üst Düzey Bileşen (HOC), bir bileşen alan ve onu saran yeni bir bileşen döndüren işlevdir. Özgün bileşeni değiştirmeden günlük kaydı, kimlik doğrulama denetimleri veya veri yükleme gibi kesitsel davranışlar ekler.

İşlev İmzası

Bir HOC, geleneksel olarak with ön ekiyle adlandırılır. Sarmalanan bileşeni alır ve geliştirilmiş bir bileşen döndürür.

function withLogging(Wrapped) {
  // return a new component
}

defineComponent Döndürme

Yeni bileşen defineComponent ile oluşturulur. Bu bileşenin setup işlevi, sarmalanan bileşeni h aracılığıyla oluşturur.

import { defineComponent, h } from "vue";

function withLogging(Wrapped) {
  return defineComponent({
    setup(props, ctx) {
      return () => h(Wrapped, props, ctx.slots);
    }
  });
}

Öznitelikleri İletme

Sarmalayıcının saydam olması için ctx.attrs değerini sarmalanan bileşene yayarak aktarın. Böylece sınıf, stil ve tanınmayan özellikler iletilir.

setup(props, { attrs, slots }) {
  return () => h(Wrapped, { ...attrs }, slots);
}

Yuvaları İletme

Sarmalayıcının slots nesnesini alt öğeler bağımsız değişkeni olarak geçirin; böylece sarmalanan bileşen, kullanıcının sağladığı tüm yuva içeriğini almaya devam eder.

return () => h(Wrapped, attrs, slots);

Kesitsel Davranış Ekleme

Asıl amaç davranış eklemektir. Burada sarmalanan bileşenin bağlanması ve kaldırılması sırasında log tutarız.

import { onMounted, onUnmounted } from "vue";

function withLogging(Wrapped) {
  return defineComponent({
    setup(props, { attrs, slots }) {
      onMounted(() => console.log("mounted"));
      onUnmounted(() => console.log("unmounted"));
      return () => h(Wrapped, attrs, slots);
    }
  });
}

HOC Kullanımı

Herhangi bir bileşeni sarın ve sonucu şablonlarda veya diğer oluşturma işlevlerinde normal bir bileşen gibi kullanın.

import BaseTable from "./BaseTable.vue";

const LoggedTable = withLogging(BaseTable);
// register or use LoggedTable like any component

Sarmalayıcıyı Adlandırma

Sarmalayıcının Vue DevTools içinde tanınabilmesi için bir name belirleyin. Sarmalanan adını birleştirmek, ağacın okunabilir kalmasını sağlar.

return defineComponent({
  name: "WithLogging(" + (Wrapped.name || "Anonymous") + ")",
  setup(props, ctx) { /* ... */ }
});

Ek Özellikler Ekleme

Bir HOC, getirilen veri kümesi veya özellik bayrağı gibi ek özellikleri sarmalanan bileşene sağlayabilir.

function withUser(Wrapped) {
  return defineComponent({
    setup(props, { attrs, slots }) {
      const user = inject("currentUser");
      return () => h(Wrapped, { ...attrs, user }, slots);
    }
  });
}

HOC ve Birleştirilebilir İşlevler

Birleştirilebilir işlevler mantığı paylaşır ve Vue 3'te çoğu zaman tercih edilir. HOC'ler, düzenleyemediğiniz mevcut bir bileşenin oluşturmasını sarmanız gerektiğinde veya hata işleme gibi bir sınırı standartlaştırmak istediğinizde en uygunudur.

Birden Çok HOC'u Birleştirme

Her HOC bir bileşen döndürdüğü için iç içe yerleştirilerek birleştirilir. En dıştakini en son uygulayın.

const Enhanced = withLogging(withUser(BaseTable));

Hızlı Kontrol

Bir HOC sarmalayıcısının saydam olması için sarmalanan bileşene neyi iletmesi gerekir?

Özet

withLogging(Wrapped) gibi bir HOC, kurulumu sarmalanan bileşeni h(Wrapped, attrs, slots) ile oluşturan yeni bir defineComponent döndürür ve günlük kaydı veya enjekte edilen özellikler gibi kesitsel davranışlar ekler. Saydamlığı korumak için öznitelikleri ve yuvaları iletin; yalnızca mantık paylaşmanız gerekiyorsa birleştirilebilir işlevleri tercih edin.

Sıkça Sorulan Sorular

“Üst Düzey Bileşen (HOC) Kalıbı” dersi ücretsiz mi?

Evet — “Üst Düzey Bileşen (HOC) Kalıbı” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Üst Düzey Bileşen (HOC) Kalıbı” dersinde ne öğreneceğim?

Bileşenleri HOC'lerle sarmalama, props ve slot'ları aktarma, HOC yerine composable'ın ne zaman kullanılacağı. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Üst Düzey Bileşen (HOC) Kalıbı” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Vue Academy Sayfasına Dön