Vue Academy · Ders

Vue ile Web Worker'lar

Türü belirlenmiş web worker API'si için Comlink, ağır hesaplamaları ayırma ve ilerlemeyi reaktif olarak izleme.

4. ders / 413 adım

Vue ile Web Worker'lar, 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.

Web Çalışanları Neden Kullanılır

JavaScript, oluşturma işlemiyle paylaşılan tek bir ana iş parçacığında çalışır. Yoğun hesaplama kullanıcı arayüzünü dondurur. Web çalışanı kodu ayrı bir iş parçacığında çalıştırarak Vue uygulamanızın yanıt vermeye devam etmesini sağlar.

Çalışan Oluşturma

Bir çalışanı modül dosyasından örnekleyin. Vite, { type: "module" } seçeneğini destekler ve çalışanı doğru şekilde paketler.

const worker = new Worker(
  new URL("./worker.js", import.meta.url),
  { type: "module" }
);

Çalışan Dosyası

Çalışanın DOM erişimi olmayan kendi genel kapsamı vardır. İletileri dinler ve sonuçları geri gönderir.

// worker.js
self.onmessage = (e) => {
  const result = heavyCompute(e.data);
  self.postMessage(result);
};

postMessage ile Veri Gönderme

Ana iş parçacığından veri yüküyle postMessage çağrısı yapın. Veriler, iş parçacıkları arasındaki sınırdan yapılandırılmış kopyalama yoluyla geçirilir.

worker.postMessage({ numbers: [1, 2, 3] });

Sonuçları Alma

Çalışanın yanıtını onmessage ile yönetin. Olayın data özelliği gönderilen değeri içerir.

worker.onmessage = (e) => {
  console.log("result", e.data);
};

Reaktif Başvuruyu Güncelleme

İşleyicinin içinde sonucu reaktif bir başvuruya yazın; böylece şablon otomatik olarak güncellenir.

import { ref } from "vue";

const result = ref(null);
worker.onmessage = (e) => {
  result.value = e.data;
};

Bir Bileştirilebilir İşleve Bağlama

Çalışanı yeniden kullanılabilmesi ve temizlenebilmesi için bir bileştirilebilir işleve sarın. İş parçacığını serbest bırakmak için bağlantı kaldırıldığında çalışanı sonlandırın.

import { ref, onUnmounted } from "vue";

export function useWorker() {
  const worker = new Worker(
    new URL("./worker.js", import.meta.url),
    { type: "module" }
  );
  const result = ref(null);
  worker.onmessage = (e) => { result.value = e.data; };
  onUnmounted(() => worker.terminate());
  return { result, run: (d) => worker.postMessage(d) };
}

İleti Protokolünün Zorluğu

Ham postMessage, bir ileti türü protokolü oluşturmanızı ve istekleri yanıtlarla elle eşleştirmenizi gerektirir. Birden çok işlem için bu yaklaşım çok ayrıntılı hâle gelir.

Comlink İmdada Yetişiyor

Comlink, ileti kanalını sararak çalışan işlevlerini yerel eşzamansız yöntemleri çağırıyormuşsunuz gibi kullanmanızı sağlar. Bu kitaplığı çalışanla birlikte yükleyin.

npm install comlink

Çalışandan API Sunma

Çalışanın içinde Comlink.expose ile işlevlerden oluşan bir nesne sunun.

// worker.js
import * as Comlink from "comlink";

const api = {
  add: (a, b) => a + b,
  process: (data) => heavyCompute(data)
};
Comlink.expose(api);

Tür Bilgili Vekil için Comlink.wrap

Ana iş parçacığında Comlink.wrap, yöntemleri promise döndüren bir vekil sağlar. Böylece çalışana erişmek için temiz ve tür bilgili bir API elde edersiniz.

import * as Comlink from "comlink";

const worker = new Worker(
  new URL("./worker.js", import.meta.url),
  { type: "module" }
);
const api = Comlink.wrap(worker);

const sum = await api.add(2, 3); // 5

Kısa Kontrol

Comlink.wrap, ham postMessage karşısında ne sağlar?

İnteraktif derste cevapla

Özet

Yoğun işleri new Worker(url, { type: "module" }) ile oluşturulan bir web çalışanına aktarın. Verileri postMessage ile gönderin, yanıtları onmessage içinde yönetin ve sonuçları reaktif bir başvuruya yazın. Bunu bağlantı kaldırıldığında çalışanı sonlandıran bir bileştirilebilir işleve sarın; temiz, tür bilgili ve promise tabanlı bir vekil API için Comlink.wrap kullanın.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 42
Dersler: 156

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Vue ile Web Worker'lar” dersi ücretsiz mi?

Evet — “Vue ile Web Worker'lar” 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.

“Vue ile Web Worker'lar” dersinde ne öğreneceğim?

Türü belirlenmiş web worker API'si için Comlink, ağır hesaplamaları ayırma ve ilerlemeyi reaktif olarak izleme. 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.

“Vue ile Web Worker'lar” 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

Şablon Önbellekleme için v-memo
Vue DevTools Performans Sekmesiyle Profil Oluşturma
Büyük Listeler için Sanal Kaydırma
Vue ile Web Worker'lar

← Vue Academy Sayfasına Dön