Vue-da computed və method arasındakı fərq.

Computed ve Methods çox oxşar görünə bilər,amma aralarında fərqli bir məqam var ki, bu da onların tamamilə fərqli olduğunu göstərir.

Vue-da funksiyalar methodlar daxilində yazırıq ve methodlar daxilinde yazilmiş funksiyalar səhifə hər update olunduğunda tekrar tekrar render olunur. Yəni hər update olunanda methodlar işə düşür. Və buda bizə bəzi məqamlarda probləm yaradir.

Aşağıdakı nümunəyə baxsaq görə bilərik ki, inputda etdiyimiz hər dəyişiklikdə səhifə yenidən render olur və nəticədə methodlarda yenidən işləyir.Bunu consola yazilan “test…” ifəadəsindən görə bilərik.

<template>
  <div class="home">
    <input v-model="message" placeholder="edit me">
    {{changeData()}} (methods)
  </div>
</template>

<script>

export default {
  name: "Home",
  data(){
    return{
      message:"",
      name:"leman",
      age:"19"
    }
  },

  methods:{
    changeData(){
      console.log("test...")
      return this.name
    }
  },
};
</script>

Vue-da computed daxilində həm funksiyalar həm də object yaza bilərik.Amma o funksiya və object yazılır ki, yalnız onların daxilində olan data dəyişdiyi halda hemin funksiya və object yenidən render olunur.

Aşağıdaki nümunədən görə bilərik ki, ilk dəfə component işə düşəndə computed işə salınır.Digər hallarda computed daxilindəki dataya müdaxilə edilmədiyi təqdirdə computed yenidən render edilməyəcək.

<template>
  <div class="home">
    <input v-model="message" placeholder="edit me">
    {{changeData2}} (computed)
    {{changeData()}} (methods)
  </div>
</template>

<script>

export default {
  name: "Home",
  data(){
    return{
      message:"",
      name:"leman",
      age:"19"
    }
  },
  computed:{
    changeData2: function () {
      console.log("test2...(computed)")
      return this.name
    }
  },
  methods:{
    changeData(){
      console.log("test...(methods)")
      return this.name
    }
  },
};
</script>

Xülasə:

Əgər böyük bir data və ya API datasi üzərində işləyəcəyiksə bu datanin səhifəyə bir dəfə yüklənməsi kifayyət edir.Bunun üçündə computed-dən istifdə etmək daha əlverişli olur.Bu məqamda method-dan istifadə etsək , təkrar təkrar data yüklənməsi olur. Bu yanaşmada problem yaradir.