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.
Artigos relacionados:
jQuery like Angular.js directive
9 novidades da versão 7.1 do PHP
Comportamento de typeof em JavaScript
VueJS – $Watch e uma pequena comparação para os que vieram do Angular1.x
VueJS – Maneira simplificada de debugar o conteúdo de dados
Como saber a versão atual do seu servidor PostgreSQL via SQL
Angular.js 1.4 – Como adicionar uma directive dentro de outra directive
Comportamento interessante e em geral pouco esperado da função sort do JavaScript
Remover e adicionar atributos HTML condicionalmente no Vue.js