Vue'daki yöntemler reaktif midir?

Bir süredir Vue kullanıyorum ve deneyimim her zaman temel reaktif verileri güncellenirse yeniden hesaplanacak bir yöntem olmuştur. SO hakkında çakışan bilgilerle karşılaştım:

• Bu soruyu cevaplamaya çalışıyordum ve birçok kez durumun böyle olmadığı söylendi.
• Kabul cevabı burada "siz özellikle çağırdığınızda [yöntemi] sadece değerlendirilecektir." Belirtir

Belgeleri araştırdım ve inanılmaz net bir şey görmedim.

Reaktif değillerse, bu örnek neden işe yarar?

<ul>
  <li v-for="animal in animals" :key="animal.id">
    <span v-if="isAwesome(animal)">{{ animal.name }}</span>
  </li>
</ul>

export default {
  data() {
    return {
      awesomeAnimalIds: [],
      animals: [
        { id: 1, name: 'dog' },
        { id: 5, name: 'cat' },
        { id: 9, name: 'fish' },
      ],
    };
  },
  created() {
    setTimeout(() => {
      this.awesomeAnimalIds.push(5);
    }, 1000);
    setTimeout(() => {
      this.awesomeAnimalIds.push(9);
    }, 2000);
  },
  methods: {
    isAwesome(animal) {
      return this.awesomeAnimalIds.includes(animal.id);
    },
  },
};

Ben ediyorum gerçekten bu topluluk referans verebilmek kesin ve tatmin edici cevap ister.

Dayanarak nasıl değişiklikler izlenir burada oluyor ne, dokümanlardan:

1. Yeniden oluşturmanın ne zaman gerekli olduğunu belirlemek için bileşen örneği için özel bir izleyici oluşturulur.

2. Vue, tüm özelliklerini dataalıcılara ve ayarlayıcılara dönüştürür .

get animals() {
  // Add dependency: potentially trigger a re-render if animals updates
  ...
}
set animals() {
  // Notify the watcher that animals has been updated
  ...
}
get awesomeAnimalIds() {
  // Add dependency: potentially trigger a re-render if awesomeAnimalIds updates
  ...
}
set awesomeAnimalIds() {
  // Notify the watcher that awesomeAnimalIds has been updated
  ...
}

3. Şablon oluşturulur. Oluşturma sırasında, isAwesomeşablondan bir çağrı yapılır.
4. Vücudunda isAwesome, avcısı awesomeAnimalIdsçağrılır.
5. Gözcü, awesomeAnimalIdssahasına bağımlılık kurar data.
6. Zaman aşımından sonra awesomeAnimalIds, awesomeAnimalIdsayarlayıcıyı çağıran güncellenir .
7. Şablon data, bildirim alan bir alana bağlı olduğundan, yeniden oluşturma tetiklenir.
8. Adım (3) 'ü tekrarlayın.

Bu ve yukarıdaki bu örnekten aşağıdakileri sonuçlandırabiliriz:

Bir şablondan yapılan bir yöntem çağrısı data, yöntem çağrısı yığınında kullanılan alanların alt kümesine reaktif bir bağımlılık oluşturur . Temel alanlar güncellenirse, bileşenin yeniden oluşturulmasını tetikler.

Bir şablondan çağrıldığında yöntemlerin "yalnızca bir kez çağrıldığını" veya "ateşle ve unut" olduğunu gösteren yaygın bir yanlış anlama vardır. Bu her zaman geçerli değildir çünkü yöntemler reaktif bir bağımlılık oluşturabilir .

Öyleyse, hesaplanmış bir özelliği ve bir yöntemi ne zaman kullanmalıyız?

Bilgisayarlı Önbellekleme ve Yöntemler arasındaki kılavuz bölümüne bakın . İşte benim almam:

• Hesaplanan bir özellik yalnızca reaktif bağımlılıkları değiştiğinde yeniden değerlendirilir. Daha fazla verimlilik için önbellek kullanır.
• Hesaplanan özellikler yan etkisiz olmalıdır. Örneğin fetch, onları aramamalısınız.
• Verimlilik nedeniyle mümkünse her zaman hesaplanan bir özelliği bir yönteme tercih edin.
• Yan etkileriniz varsa veya bir argümanı iletmeniz gerekiyorsa (orijinal soruda görüldüğü gibi) bir yöntem kullanın.

Hayır, yöntemler reaktif değildir. Vue'de yalnızca veriler reaktif olabilir.

AMA Vue'nun nasıl çalıştığını anlamak önemlidir ...

1. Vue şablonunuzu alacak, render fonksiyonuna derleyecek ve render fonksiyonunu çalıştıracak
2. Oluşturma işlevi çalışırken, Vue tüm data()üyeleri izler (bunu yalnızca ilk oluşturma sırasında değil, her zaman yapar). Oluşturma sırasında verilerden herhangi birine erişilirse, Vue bu veri üyesinin içeriğinin oluşturmanın sonucunu etkilediğini bilir.
3. Vue, 2. adımda toplanan bilgileri kullanır. Veri üyesi değişiklik oluşturma sırasında "dokunduğunda", yeniden oluşturmanın gerçekleşeceğini ve bir şey yapması gerektiğini bilir ...

Veri üyesine doğrudan başvurmanız önemli değildir, içinde computedveya içinde kullanın method. Oluşturma sırasında verilere "dokunulursa", veri değişikliği gelecekte yeniden oluşturmayı tetikler ...

Bu çok ilginç bir durum.

Okuduğumdan ve tecrübelerimden şunu söyleyebilirim: Hayır, yöntemler doğal olarak reaktif değildir. Bir yöntemin yürütülmesi için açıkça çağrılması gerekir.

Ancak, vakanızı nasıl açıklayabilirim? Kodunuzu bir sanal alana koyuyorum ve yeterince eminim, id'leri diziye ittiğinizde, şablon hayvan adını görüntülemek için güncellenir. Bu bir miktar reaktiviteye işaret eder. Ne oluyor?

Bir deneme yaptım. divOluşturulduğunda rastgele bir sayı üreten her döngüye bir basit ekledim .

<li v-for="animal in animals" :key="animal.id">
        <div>{{ random() }}</div>
        <span v-if="isAwesome(animal)">{{ animal.name }}</span>
</li>

...

random() {
      return Math.random();
}

Ve gördüğüm şey, diziye her yeni kimlik eklendiğinde, tüm rastgele sayıların değişeceğiydi. Yöntem neden isAwesomereaktif gibi "neden" göründüğünü anlamanın anahtarı budur .

Her nasılsa, diziye yeni bir kimlik aktarıldığında, Vue döngüyü tamamen yeniden oluşturur ve böylece yöntemleri yeniden yürütür. Vue'nun tüm döngüyü neden yeniden oluşturduğunun iç çalışmalarını açıklayamıyorum, bu da daha fazla araştırma gerektirecektir.

Sorunuzu cevaplamak için. isAwesometepkisel değildir, sadece döngünün yeniden oluşturulmasıyla yaratılan bir yanılsamadır.