Reaktif Veriler için Vue.js İzleyicileri Nasıl Kullanılır

Vue.js'de izleyiciler, reaktif verilerinizdeki değişiklikleri gözlemlemenize ve bunlara yanıt vermenize olanak tanıyan güçlü bir özelliktir. Veri değişikliklerine yanıt olarak kod yürütmenin bir yolunu sağlarlar; bu, veri doğrulama, API çağrıları veya belirli veri özellikleri değiştiğinde hesaplamalar yapma gibi görevler için yararlı olabilir.

Bu makalede Vue.js'de watcher'ların nasıl tanımlanacağı, nasıl etkili bir şekilde kullanılacağı ve bazı pratik örnekler dahil olmak üzere temel kullanım konuları ele alınacaktır.

Gözlemciler Kimlerdir?

Gözlemciler, bir Vue bileşeninin watch nesnesinde tanımlanan işlevlerdir. Belirli veri özelliklerini izlemek ve bu özellikler değiştiğinde kodu yürütmek için kullanılırlar. Hesaplanan özelliklerin aksine, gözlemciler değer döndürmez; bunun yerine yan etkiler gerçekleştirmek veya diğer eylemleri tetiklemek için kullanılırlar.

Bir Gözlemciyi Tanımlamak

Bir izleyici tanımlamak için, izlemek istediğiniz veri özelliğini belirtirsiniz ve bu özellik değiştiğinde yürütülecek bir işlev sağlarsınız. İşte temel bir örnek:

<template>
  <div>
    <input v-model="message" placeholder="Type something"/>
    <p>Message: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  watch: {
    message(newValue, oldValue) {
      console.log('Message changed from', oldValue, 'to', newValue);
    }
  }
};
</script>

Bu örnekte, mesaj veri özelliği izleniyor. mesaj değiştiğinde, gözlemci eski ve yeni değerleri konsola kaydeder.

API Çağrıları için Gözlemcileri Kullanma

Gözlemciler, belirli veri özellikleri değiştiğinde API çağrılarını tetiklemek için özellikle yararlı olabilir. Örneğin, bir arama terimi güncellendiğinde bir API'den veri almak isteyebilirsiniz.

Bir API'den veri almak için bir izleyicinin kullanımına dair bir örnek aşağıda verilmiştir:

<template>
  <div>
    <input v-model="searchTerm" placeholder="Search"/>
    <ul>
      <li v-for="item in results" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchTerm: '',
      results: []
    };
  },
  watch: {
    searchTerm(newTerm) {
      this.fetchResults(newTerm);
    }
  },
  methods: {
    async fetchResults(term) {
      if (term) {
        const response = await fetch(`https://api.example.com/search?q=${term}`);
        this.results = await response.json();
      } else {
        this.results = [];
      }
    }
  }
};
</script>

Bu örnekte, searchTerm veri özelliği izlenir ve her değiştiğinde, bir API'den arama sonuçlarını almak için fetchResults yöntemi çağrılır.

Derin İzleme

Bazen iç içe geçmiş özellikleri veya nesneleri izlemeniz gerekebilir. Bu gibi durumlarda, deep seçeneğini true olarak ayarlayarak derin izlemeyi kullanabilirsiniz. Bu, nesne içindeki tüm iç içe geçmiş özellikleri değişiklikler açısından izleyecektir.

Derin izleme örneği şöyledir:

<template>
  <div>
    <input v-model="user.name" placeholder="Enter your name"/>
    <p>User Name: {{ user.name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: ''
      }
    };
  },
  watch: {
    user: {
      handler(newValue) {
        console.log('User object changed:', newValue);
      },
      deep: true
    }
  }
};
</script>

Bu örnekte, user nesnesi derin izleniyor. user nesnesi içindeki iç içe geçmiş özelliklerde yapılan herhangi bir değişiklik izleyiciyi tetikleyecektir.

Hemen İzleyiciler

Bazen izleyicinin yalnızca veriler değiştiğinde değil, bileşen oluşturulduğunda hemen çalışmasını isteyebilirsiniz. Bunu, immediate seçeneğini true olarak ayarlayarak başarabilirsiniz.

İşte anında izleyen bir örnek:

<template>
  <div>
    <input v-model="count" placeholder="Enter a number"/>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  watch: {
    count: {
      handler(newCount) {
        console.log('Count changed to:', newCount);
      },
      immediate: true
    }
  }
};
</script>

Bu örnekte, count izleyicisi, bileşen oluşturulduğunda ve count değeri her değiştiğinde hemen çalışacak şekilde ayarlanmıştır.

İzleyicileri Kullanmak İçin En İyi Uygulamalar

• API çağrıları gibi yan etkiler ve eşzamansız işlemler için izleyicileri kullanın.
• İzleyicilerin tek bir göreve odaklanmasını sağlayın ve görev içindeki karmaşık mantıklardan kaçının.
• Reaktif verilere dayalı basit hesaplamalar için bunun yerine hesaplanan özellikleri kullanmayı düşünün.
• Gereksiz hesaplamalardan ve performans sorunlarından kaçınmak için deep ve immediate seçeneklerini dikkatli kullanın.
• İzleyicilerinizi test ederek farklı senaryolarda beklendiği gibi davrandıklarından emin olun.

Çözüm

Vue.js izleyicileri, reaktif verilerdeki değişikliklere tepki vermek ve yan etkiler gerçekleştirmek için değerli bir özelliktir. İzleyicileri etkili bir şekilde nasıl kullanacağınızı anlayarak, Vue.js uygulamalarınızın etkileşimini ve yanıt verme yeteneğini geliştirebilirsiniz. Vue.js'nin reaktif veri sisteminden tam olarak yararlanmak için izleyicileri projelerinize dahil etmeye başlayın.