<![CDATA[burhantanis.com Kod Dünyam RSS Feed]]> https://burhantanis.com/ Şehir Notları ve Kod Dünyam adında 2 farklı alanda bilgilerimi paylaşmakta, düşüncelerimi yazmaktayım. Fri, 04 Jan 2019 21:09:00 +0000 tr-TR burhanmt@outlook.com (Burhan T.) Copyright 2015-2019 3600 <![CDATA[PHP'de "Generator function" kullanımı ve hafızayı verimli kullanmada oynadığı rol]]> https://burhantanis.com/blog_kod_dunyam/2019/09/13/phpde-generator-function-kullanimi-ve-hafizayi-verimli-kullanmada-oynadigi-rol https://burhantanis.com/blog_kod_dunyam/2019/09/13/phpde-generator-function-kullanimi-ve-hafizayi-verimli-kullanmada-oynadigi-rol post Fri, 13 Sep 2019 12:47:00 +0100 PHP’de GENERATOR FUNCTION diye adlandırlan bir fonksiyon türü. PHP 5.5 sürümü ile camiyaya katılıyor. Normal bir fonksiyona çok benziyor; ama bu fonksiyonda “return” yerine “yield” kullanıyoruz. Böylece yield kullandığımız fonksiyonlar otomatik olarak “Generator Function” diye adlandırılıyor.

“Return” den farklı olarak, yield işlemi gerçekleştirdikten sonra yordamı sonlandırıp fonksiyondan çıkartmıyor bizi; tam tersi işlemi devam ettiriyor. Bu yüzden döngü içerisinde kullanımı aslında işlevini en iyi gerçekleştirdiği yer. Çünkü döngü içinde biz “return” kullanmış olsak ilk işlemden sonra yordamı sonlandırır ve değer döndürür. İşte burada “yield” kullandığımız takdirde işlem sonlanmıyor ve döngü bitene kadar işlem devam ediyor. Her bir döngü içerisindeki sonucu yield içerisine “array” tipindeymiş gibi koyuyor; ama “yield” bir array de değil. Tam manada “Allocated memory” kullanmıyor. Her bir işlemden sonra oluşturduğu iterator nesnesinin son pozisyonundan işleme devam ediyor. Daha da somutlaştırırsak örneğimizi, hani veritabanlarinda bulunan “Cursor” mantığı ile aynı şekilde çalışıyor. Hafızaya almaktansa cursor pozisyonunu next() şeklinde ilerletiyor. Bu yüzden bir hafıza limiti ile de karşılaşmayacağız.

Eğer büyük datasetler ile calışacaksanız “yield” kullanmalısınız. Mesela bir text dosyasını okuduğunuzu düşünelim. Bu iş için yield kullanılabilir.

Ayrıca tekrar belirtmeliyim ki “yield” bir fonksiyon içerisinde kullanılmak zorundadır. Bu yüzden yazının başında da dediğim gibi “yield” in kullanıldığı fonksiyonun adına da “Generator Function” diyoruz.

Örneklerle açıklamaya devam edelim:

function numbers() {
     for($i=0; $i<=10; $i++) {
        yield $i; 
    } 
}

Yukarıdaki örnekte görülmek üzere “yield” kısmında “$i” değişkeni iterator nesnesi şeklinde yield içerisinde oluyor ve işlem devam ediyor. En son işlemden sonra yordam sonlanıyor. Buradan şu sonucu da çıkartabiliriz: “yield” tek başına return den farklı olarak hiç bir değişken ya da dizi kullanmadan birden fazla değer tutabiliyor içinde.

“yield” içerisindeki veriyi okuyabilmek için dizilerde yaptığımız gibi şöyle yapmalıyız:

$numbers =  numbers();

foreach($numbers as $number) {
echo "$number \n";
}

Yield’in faydaları neler?

  1. Hafızadan belirli bir yer ayırma ihtiyacı duymadığı için hafıza limiti problemi yok. Çok geniş verilerle çalışabiliriz.

  2. Generator functionlar normal functionlardan daha hızlı çalışır.

  3. Kod karmaşıklığını daha da azaltıyor. Kodun okunabilirliğini artırıyor.

  4. Bu özellik PHP 5.5 sürümünde ekleniyor; Generator fonksyionlar normalde return değeri göndermezler; ama 7.0 ile gönderebilmeleri sağlanıyor ve “getReturn()” ile bu değeri alabiliyoruz. Şöyle:

    <?php

    $gen = (function() {
        yield 1;
        yield 2;

        return 3; // bu özellik 7.0 ile geldi
    })();

    foreach ($gen as $val) {
        echo $val, PHP_EOL;
    }

    echo $gen->getReturn(), PHP_EOL;

Çıktı:
    1
    2
    3

Şimdi hafıza kullanımı ile ilgili bir örnek yazalım. Böylece array ile arasında nasıl bir fark olduğunu görün:

<?php


function sample_array($value)
{
    $i = 0;
    $data = [];


    while ($i < $value) {
        $i++;
        $data[] = round(memory_get_usage(true) / 1024 / 1024, 2);
    }

    return $data;

}


function sample_generator($value)
{
    $i = 0;

    while ($i < $value) {
        $i++;
        yield round(memory_get_usage(true) / 1024 / 1024, 2);

    }


}


foreach (sample_array(150000) as $value) {
    $result = $value;
}
echo "Memory Consumption (function with array): $result MB \n";

echo "-----------------\n";

foreach (sample_generator(150000) as $value) {
    $result = $value;
}
echo "Memory Consumption (generator function with yield):  $result MB \n";
Çıktı:

Memory Consumption (function with array): 10 MB 
-----------------
Memory Consumption (generator function with yield):  2 MB 
]]>
<![CDATA[Builder Tasarım Kalıbı Nedir?]]> https://burhantanis.com/blog_kod_dunyam/2019/07/28/builder-tasarim-kalibi-nedir https://burhantanis.com/blog_kod_dunyam/2019/07/28/builder-tasarim-kalibi-nedir post Sun, 28 Jul 2019 03:14:00 +0100 Builder tasarım kalıbı da Tasarım kalıplarının “Creational” kategorisi içerisinde yer alır. Bu kategori önceden de bahsettiğim üzere nesnelerin oluşturulması ve yönetilmesi ile ilgili kalıpların bulunduğu kategoridir.

Bu tasarım kalıbı, bazı nesnelerin “constructor” kısmında karmaşık değişkenler girmek zorunda olduğumuz zaman bu durumu basitleştirerek daha okunaklı, tekrar kullanılabilir ve bakımı kolay yapılabilir hale getirir.

Örnekle anlatmaya devam edelim.

Mesela bir “Pizza” sınıfımız olsun. Bu tasarım kalıbını kullanmadan önce şöyle bir tasarım yaptığımızı farz edin:

<?php

class Pizza
{
    private $tarif;
    private $ekPeynir;
    private $boyut;
    private $sos

    public function __construct(string $tarif, bool $ekPeynir, int $boyut, string $sos) 
    {
        $this->tarif    = $tarif;
        $this->ekPeynir = $ekPeynir;
        $this->boyut    = $boyut;
        $this->sos      = $sos;
    } 

    public function olusturulanPizza():string
    {
        $peynir = $this->ekPeynir ? " (ek peynir)" : "";

        return $this->tarif.$peynir. " pizza ile ". $this->sos.
        " sos ve boyutu ".$this->size;

    }

}

Kullanımı:

$pizzam = new Pizza('Margarita',true,10,'ketçap');
echo $pizzam->olusturulanPizza();

Yukarıdaki koda şöyle bir göz attığımızda idare ettiğini görüyoruz ama nesne oluştururken girilen parametre değişkenleri gerçekten biraz karışık gibi duruyor. Bu parametre sayısının çok daha fazla olduğunu düşünürseniz ne kadar çirkin duracağını siz düşünün.

İşte bu durumlarda “Builder” tasarım kalıbını kullanarak constructor’da kullanacağımız değişkenlerin sayısını azaltarak kodumuzu daha okunaklı, tekrar kullanılabilen ve bakımı kolay yapabiliriz.

Evvela bir PizzaBuilder adında sınıf oluşturalım:

class PizzaBuilder
{
    private $tarif;
    private $ekPeynir;
    private $boyut;
    private $sos

    public function __construct(string $tarif)
    {
        $this->tarif    = $tarif;

        //ön değerler giriyorum. Kullanılmadığında
        // otomatik bunları atayacak.
        $this->ekPeynir = false
        $this->boyut    = 10;
        $this->sos      = 'ketçap';     
    }

    public function peynirEkle()
    {
        $this->ekPeynir = true;
        return $this;
    }

    public function boyutBelirle(int $boyut)
    {
        $this->boyut = $boyut;

        return $this;
    }  

    public function sosEkle(string $sos)
    {
        $this->sos = $sos;

        return $this;

    }

    //magic metod kullandım. Private değişkenler($tarif,$ekPeynir,$boyut,$sos) sınıf dışı kullanıldığında küçük bir hile ile  bunları bu magic metod ile dışarıda kullanıma sunuyorum. Aşağıdaki Pizza sınıfında göreceksiniz bunu.
    public function __get($propertyName)
    {
        return $this->$propertyName;
    }
}

Şimdi “Pizza” sınıfımıza özelleştirilmiş pizza menümüzü dışarıdan enjekte edebiliriz. Şöyle:

class Pizza
{
    private $tarif;
    private $ekPeynir;
    private $boyut;
    private $sos

    public __construct(PizzaBuilder $builder)
    {
        $this->tarif    = $builder->tarif;
        $this->ekPeynir = $builder->ekPeynir;
        $this->boyut    = $builder->boyut;
        $this->sos      = $builder->sos;            
    }   

    public function olusturulanPizza():string
    {
        $peynir = $this->ekPeynir ? " (ek peynir)" : "";

        return $this->tarif.$peynir. " pizza ile ". $this->sos.
        " sos ve boyutu ".$this->size;

    }
}

Kullanımı:

$pizzam = (new PizzaBuilder('FourCheese'))
                     ->peynirEkle()
                     ->sosEkle('Acılı Domates Sosu');

//ya da

$pizzam = (new PizzaBuilder('Margarita'))
                     ->peynirEkle()
                     ->boyutBelirle(8)
                     ->sosEkle('Tatlı Domates Sosu');


$pizzaHazirla = new Pizza($pizzam);
echo $pizza->olusturulanPizza();                 

Nasıl ama ?

]]>
<![CDATA[Strategy ve Factory Tasarım Kalıplarının Birlikte Kullanımı]]> https://burhantanis.com/blog_kod_dunyam/2019/07/27/strategy-ve-factory-tasarim-kaliplarinin-birlikte-kullanimi https://burhantanis.com/blog_kod_dunyam/2019/07/27/strategy-ve-factory-tasarim-kaliplarinin-birlikte-kullanimi post Sat, 27 Jul 2019 23:03:00 +0100 Factory Tasarım Kalıbında kullandığım örneği Strategy tasarım kalıbını da işin içine katarak genişletelim.

Evvela tekrardan bir “Car” interface’i oluşturulalım. Sonra bu interface’den diğer arabalarımızı implement edeceğiz.

 <?php

 interface Car
 {
     public function arabayiSur(): string;
 }

Daha sonra Tofas ve Mercedes arabalarımızı implement edelim aşağıdaki gibi:

 class Tofas implements Car
  {
     public function arabayiSur(): string
     {
         return "Tofaş arabayı sürüyorum";
     }
 }


 class Mercedes implements Car
  {
     public function arabayiSur(): string
     {
         return "Mercedes arabayı sürüyorum";
     }
 }

Buraya kadar tamam. Bu adımdan sonra Strategy tasarım kalıbını kullanarak bu nesneleri çalışma esnasında enjekte edecek şekilde ana kodumuzu aşağıdaki gibi yazalım:

 Class CarStrategy {

  private $strategy;

     Public __construct(Car $strategy) {

         $this->strategy = $strategy
     }

     Public function arabayiSur() {

            return $this->strategy->arabayiSur();

     }

 }

Şimdi Yukarıda Stategy tasarım kalıbını kullanarak kodladığımız sınıfı, CarFactory sınıfının içerisinde Factory Tasarım kalıbını kullanarak yazalım:

 Class CarFactory {

     Public static function arabaAl(bool $luks):Car {

          $car = new CarStrategy();


         if ($luks === true) {

             return $car->set_new_strategy(new Mercedes());
         }

         return $car->set_new_strategy(new Tofas());

     }

 }

Kullanımı:

 $car = CarFactory::getCar(true);
 echo $car->drive();

Bu kadar! Bu örnekle hem Strategy hem de Factory kalıbını bir arada kullanmış oldum.

]]>
<![CDATA[Strategy Tasarım Kalıbı Nedir?]]> https://burhantanis.com/blog_kod_dunyam/2019/07/23/strategy-tasarim-kalibi-nedir https://burhantanis.com/blog_kod_dunyam/2019/07/23/strategy-tasarim-kalibi-nedir post Tue, 23 Jul 2019 01:50:00 +0100 Bazen bazı durumlarda bir işlemi yapmak için birden fazla yöntem kullanmamız gerekebilir. Örneğin maaş hesaplama programımız olsun ve bu program yabancı çalışanlar için farklı bir yöntem izlerken, yerli çalışanlar için de ondan daha farklı bir hesaplama yöntemi yapmış olsun. Biz tüm bunları bir sınıfa dahil ederek

function yabancıMaasHesapla($maas)
function yerliMaasHesapla($maas)

tarzında metodlar yazarsak bir çok yazılım prensibi kuralını ihlal etmiş oluruz. İşte bu durumlar için Strategy tasarım kalıbını kullanarak yazılım prensiplerini ihlal etmeden genişletilebilir, tekrar kullanılabilir, test edilebilir ve daha okunaklı bir kod yapısı orta çıkartmış oluruz.

Strategy tasarım kalıbı Behavioral dediğimiz birlikte belirli bir işi yerine getirmek için çeşitli sınıfların nasıl birlikte davranabileceğinin belirlenmesi kategori grubundadır.

Yukarıdaki senaryomuzu örneğe dökerek açıklamaya devam edelim:

İlk başta bir interface oluşturalım:

Interface Maas
{

    public function maasHesapla(int $maas): int;
}

Sonra bu interface’den YabanciMaas ve YerliMaas sınıflarımızı implement edelim. Sonrada hesaplama yöntem, katsayı vs. kodlayalım sınıf içinde aşağıdaki gibi:

Class YabanciMaas implements Maas
{

    public function maasHesapla(int $maas): int
    {

        return ($maas * 3);

    }
}

Class YerliMaas implements Maas
{

    public function maasHesapla(int $maas): int
    {
        return ($maas * 4);
    }
}

Şimdi de ana sınıfımızı yazalım:

Class MaasHesaplama
{

    private $maas;

    public function maasHesaplamaYontemi(Maas $maas)
    {
        $this->maas = $maas;

        return $this;
    }

    public function maasHesapla($maas)
    {
        return $this->maas->maasHesapla($maas);

    }
}

Kullanımı şu şekilde:

$maas = new MaasHesaplama();

echo $maas->maasHesaplamaYontemi(new YabanciMaas())
            ->maasHesapla(200);

echo $maas->maasHesaplamaYontemi(new YerliMaas())
            ->maasHesapla(200);
]]>
<![CDATA[Factory Tasarım Kalıbı Nedir?]]> https://burhantanis.com/blog_kod_dunyam/2019/07/22/factory-tasarim-kalibi-nedir https://burhantanis.com/blog_kod_dunyam/2019/07/22/factory-tasarim-kalibi-nedir post Mon, 22 Jul 2019 15:39:00 +0100 Factory tasarım kalıbı kısaca istediğimiz özellikteki nesneyi oluşturup bize döndüren bir kalıptır. “Creational” tasarım kalıbı kategorisine girer. Bu kategori(Creational) bir yada daha fazla nesnenin oluşturulması ve yönetilmesi ile ilgilidir.

Şimdi örnekle daha iyi açıklamaya çalışacağım.

Bir Interface oluşturalım:

 <?php

 interface Car
 {
     public function arabayiSur(): string;
 }

Şimdi arabaları oluşturalım:

 class Tofas implements Car
  {
     public function arabayiSur(): string
     {
         return "Tofaş arabayı sürüyorum";
     }
 }

 class Mercedes implements Car
  {
     public function arabayiSur(): string
     {
         return "Mercedes arabayı sürüyorum";
     }
 }

Şimdi Factory tasarım kalıbı ile istediğimiz özellikteki nesneyi bize sağlattıralım. Şöyle:

 Class CarFactory {

     Public static function arabaAl(bool $luks):Car {

         if ($luks === true) {

             return new Mercedes();
         }

         return new Tofas();

     }

 }

Kullanımı:

 $car = CarFactory::getCar(true);
 echo $car->drive();

Hepsi bu kadar! İstediğimiz özellikteki nesneyi oluşturup $car değişkenine atıyoruz ve o nesneyi artık kullanıyoruz. Burada dikkatinizi çekmiştir ki nesne oluşturma işi Factory içerisinde yapılıyor.

Factory tasarım kalıbı, Strategy tasarım kalıbına çok benziyor; ama aradaki fark biri diğer sınıflara ait nesneleri factory içerisinde oluşturup kullanıma hazır hale getirirken, Strategy kalıbında buna ihtiyaç duyulmuyor.

“CarFactory” sınıfına tekrar dikkatle bakın. Şarta göre “Mercedes” ya da “Tofas” CarFactory içinde oluşturulup hazır hale getiriliyor ve ben kullanırken $car = CarFactory::getCar(true); tarzında istenen şart sağlandığında nesneler zaten factory içerisinde oluşturulup kullanıma hazır hale getirileceğinden bana echo $car->drive(); şeklinde oluşturulmuş nesneyi kullanmak düşüyor.

Bu yüzden Factory tasarım kalıbı “Creational” kategorisinde yer alırken, “Strategy” tasarım kalıbı da “Behavioral” tasarım kalıpları kategorisinde zikredilir.

]]>
<![CDATA["Base" HTML elementi ile tek merkezden linkleri kontrol edelim.]]> https://burhantanis.com/blog_kod_dunyam/2019/05/11/base-html-elementi-ile-tek-merkezden-linkleri-kontrol-edelim https://burhantanis.com/blog_kod_dunyam/2019/05/11/base-html-elementi-ile-tek-merkezden-linkleri-kontrol-edelim post Sat, 11 May 2019 01:22:00 +0100 Daha önce duymadığım ve yeni tanıştığım <base> elementinden/tagından bahsedeceğim. Bu element ile sayfamızdaki tüm <a href></a> elementlerini kontrol edebiliyoruz. Nasıl mı ?

Şöyle:

<head>
   <base target="_blank">
</head>

yaparsak artık tüm

<a href="https://xxxx">link</a>

a href taglarımız yeni bir pencerede açılacak.

İstersek şöyle de kullanabiliriz:

<head>
<base href="http://www.ornek.com/">
</head>

<a href="#anchor">buraya git</a>

yukarıdaki a href linklimiz şöyle alıglanacak:

http://www.ornek.com/#anchor

Birden fazla <base> elementi kullanırsak aşağıdaki gibi

<base href="http://www.ornek1.com/" target="_blank">
<base href="http://www.ornek2.com/" target="_blank">
<base href="http://www.ornek3.com/" target="_blank">

bunlardan sadece ilki baz alınarak uygulanacak ve diğer geri kalanı görmezden gelinecektir.

UYARI!

<base> elementimiz muhakkak <head></head> tagları arasında olmalıdır. Yoksa çalışmaz.

]]>
<![CDATA[Vue.js'te Hayat Döngüsü Olayları (Lifecycle Hooks)]]> https://burhantanis.com/blog_kod_dunyam/2019/05/10/vue-jste-hayat-doenguesue-olaylari-lifecycle-hooks https://burhantanis.com/blog_kod_dunyam/2019/05/10/vue-jste-hayat-doenguesue-olaylari-lifecycle-hooks post Fri, 10 May 2019 01:31:00 +0100 Oluşturduğumuz Vue.js instance nesnesi çalışırken belirli aşamalardan geçerek işlemleri yerine getirir. İşte bu belirli aşamalarda bazı durumlarda bazı spesifik kodları çalıştırma durumunda kalabiliriz.

Bu yüzden Vue.js içerisinde (Lifecycle Hooks) Türkçe olarak da “Hayat Döngüsü Olayları” diye adlandıracağım sistem içerisinde bazı metodlar oluşturmuşlar. Bu metodlar bu olayların gerçekleşme anında araya girebilmemiz için bizlere kolaylık sağlayacak. Şimdi tek tek bunları inceleyelim.

beforeCreate:

Bu hook metodu, ilk Vue.js instance nesnesi oluşturulmadan önce çağrılan metoddur. Bu aşamada data observation (reactivity), events, computed properties ve watchers’lar ayarlanma aşamasındadır ve hiç biriyle henüz etkileşime giremeyiz.

new Vue({ 

    el: '#app',

    data: { 
        a: 1 
    },
     beforeCreate: function () {

     console.log(this.a);  // Çalışmayacak. "Undefined"  hatası alacağız.
            } 
}); 

Yukarıdaki örnekte ” beforeCreated” metodu içinde this.a yazdığımızda bu değişkene erişim yapamayacağız. Çünkü etkileşime henüz hazır değil.

Created:

Bu hook metodu, ilk Vue.js instance nesnesi oluşturulduğunda çağrılan metoddur. Bu aşamada data observation (reactivity), events, computed properties ve watchers’lar ayarlanmıştır ve etkileşime girebiliriz; fakat DOM ile etkileşime giremeyiz. Çünkü mounted olmamıştır. Yani “el” elementimiz olarak belirttiğimiz html kod bloğu sanal DOM’a daha yerleştirilmemiştir. Aynı zamanda “$el” property ‘de kullanıma daha henüz hazır değildir.

new Vue({ 

    el: '#app',

    data: { 
        a: 1 
    },
     Created: function () {

     console.log(this.a);  // Çalışacak. Konsola 1 yazacak.
            } 
}); 

Yukarıdaki örnekte ” Created” metodu içinde this.a yazdığımızda artık erişim yapabiliriz.

beforeMount:

Bu aşamada “el” elementimiz olarak belirttiğimiz html kod bloğu sanal DOM’a daha yerleştirilmemiştir. Aynı zamanda “$el” property ‘de kullanıma daha henüz hazır değildir. Yerleştirme işlemi gerçekleşmeden önce bu hook metodu çağrılır.

new Vue({ 

    el: '#app',

    data: { 
        a: 1 
    },
     beforeMount: function () {

        //kodlar

            } 
});

Mounted:

Bu aşamada “el” elementimiz sanal DOM’a yerleştirilmiştir. Kısaca tüm componentler render edilmiş ve sanal DOM’a yerleştirilmiştir. Vue.js özel “$el” değişkeni yeni oluşturulan “vm.$el” ‘e devredilmiştir. Ayrıca artık tüm componentler etkileşime hazır vaziyettedir.

Sayfa açılır açılmaz ajax ile alınan bir veriyi componentlere aktarma gibi işlemler yapacaksak bu ajax çağrımları “Mounted” hook metodu içerisinde yapmanızı tavsiye ederim.

Çünkü “Mounted” JQuery’deki $(document).ready() ‘e tekabul ediyor. Arasındaki fark birisi gerçek DOM hazır olunca çağrılıyor, diğerinde de “el” elementimiz sanal DOM’a yerleştirip hazır olunca çağrılıyor.

new Vue({ 

    el: '#app',

    data: { 
        a: 1 
    },
     Mounted: function () {

        //kodlar

            } 
}); 

 UYARI!

Vue her nedense bazen tüm child componentlerin sanal DOM’a yerleştirildiğini mounted elementi ile garanti edemiyor. Evet, bazen gecikmeler olduğunu söylüyor resmi dökümanı. Eğer komple tüm görünümün renderlenip sanal DOM’a başarıyla yerleştirildiğini kesin olarak anlamak istiyorsanız mounted içerisinde şu kullanımı öneriyor:

mounted: function () {
  this.$nextTick(function () {
    // Buraya yazılacak kodlar, tüm view renderlenip sanal DOM'a yerleştirildiğinde
    // çalışacak. 
  })
}

beforeUpdate:

Bu hook metodu, herhangi bir data değiştiğinde ve DOM’da bunu güncellemeye ihtiyaç duyduğunda data ve DOM’da veri değişmeden bu metod çağrılıyor.

app = new Vue({
    el  : '#app',
    data: {
        counter: 0
    },

    beforeUpdate: function () {

        this.counter = this.counter + 1; // DOM update edilmeden önce counter'e bir ekle.
    },

    created: function () {
        setInterval(() => {
            this.counter++
        }, 1000)

    }

});

Updated:

Veride değişiklik olduktan sonra ve DOM’da da veri değiştiğinde bu hook metodu çağrılacaktır. Eğer değişiklikten sonra araya girip bir işlem yaptırmak istiyorsak bu metodu kullanacağız.

app = new Vue({
    el  : '#app',
    data: {
        counter: 0
    },

    Updated: function () {

      console.log(this.counter);
    },

    created: function () {
        setInterval(() => {
            this.counter++
        }, 1000)

    }

});

beforeDestroy:

Vue instance nesnesi yok edilmeden önce çağrılacak hook metodudur.

app = new Vue({
    el  : '#app',

    data: {
        counter: 0
    },

    beforeDestroy: function () {

      //kodlar...
    }

});

Destroyed:

Vue instance nesnesi yok edildikten sonra çağrılacak hook metodudur.

app = new Vue({
    el  : '#app',

    data: {
        counter: 0
    },

    Destroyed: function () {

      //kodlar...
    }

});

Vue.js Hayat Döngüsü Olay Şeması

Vue.js Hayat Döngüsü Olay Şeması

]]>