VueJS – Comportamento atual da versão 1.0.21 e anteriores sobre atributos extras em Directive

image_pdfimage_print

Como sabemos, a directive do Vue.js tem 3 atributos padrões: bind,update e unbind.

No entanto, pelo processo de criação atual de novas repetições de uma directive, um comportamento interessante emerge. Vejamos no código abaixo:


<div id="content">

<div v-perm="">
         Este comportamento emerge da função extend function do core do Vue.js. As cópias de object são feitas por referência.
    </div>


<div v-perm="">
        <a target="_blank" href="https://github.com/vuejs/vue/blob/dev/dist/vue.js#L245">Veja no código do Vue.js a função extend</a>
     </div>


<div v-perm="">
    </div>


<div v-perm="">
    </div>


<div v-perm="">
    </div>


<div v-perm="">
    </div>

</div>

Vue.directive('perm',{
    //O valor desta variável será reinicializado para cada nova repetição desta directive
    a:0
    ,b:{
        //O valor desta variável não será reinicializado para cada nova repetição desta directive
  	c:0
    }
    ,bind:function(){
        this.a++;
        this.b.c++;
    }
    ,update(n,o){
  	console.log("A value is: "+this.a);
        console.log("C value is: "+this.b.c);
    }
    ,unbind:function(){
  
    }
});

new Vue({
    el: function(){
        return '#content';
    },
    data: function(){
        return {
        };
    },
    methods: {
    }
});

Como resultado da execução deste código, teremos o resultado:
[pre]
A value is: 1
C value is: 1
A value is: 1
C value is: 2
A value is: 1
C value is: 3
A value is: 1
C value is: 4
A value is: 1
C value is: 5
A value is: 1
C value is: 6
[/pre]

Caso queira testar ou modificar o código acima, clique aqui.

Gostou? Tire um minutinho e dê sua contribuição para Drall Dev Community no Patreon!