Vue.js: ganchos do ciclo de vida de seus componentes e de terceiros

Os ganchos do ciclo de vida são uma parte muito importante de qualquer componente. Nós, nosso aplicativo, geralmente precisamos saber o que acontece com um componente quando ele é criado, montado, atualizado ou destruído.

No componente, podemos capturar esses eventos usando métodos apropriados, por exemplo:

• created - a instância do componente é criada
• montado - a instância do componente é montada
• updated - o DOM virtual foi atualizado devido a alterações nos dados
• destruído - a instância do componente é destruída
• etc. A documentação

No código do nosso componente, ele ficará assim:

// MyComponent.vue <template> <h1>Hello, {{ who }}</h1> </template> <script> export default { name: 'MyComponent', data() { return { who: 'world' } }, mounted() { //  -      } } </script> 

Bom Mas e se o componente pai precisar saber o que está acontecendo no componente filho, por exemplo, que o componente foi atualizado? No componente filho, podemos gerar um evento e travar um ouvinte no componente pai. No código do nosso aplicativo, será assim:

 //   ChildComponent.vue <template> <div> <div>Count: {{ counter }}</div> <button @click="add">+1</button> </div> </template> <script> export default { name: 'ChildComponent', data() { return { counter: 0 } }, updated() { this.$emit('updated') }, methods: { add() { this.counter++ } } } </script> 

 //   ParentComponent.vue <template> <div> <ChildComponent @updated="usefulMethod"/> </div> </template> <script> import ChildComponent from 'ChildComponent.vue' export default { name: 'ParentComponent', components: { ChildComponent }, data() { return {} }, methods: { usefulMethod() { //  -        } } } </script> 

Ótimo, ao atualizar o componente filho, o componente pai captura o evento atualizado e o método usefulMethod () é executado.

Está tudo bem! Mas e se precisarmos incorporar um componente de terceiros baixado do npm ou git e fazer algo útil no componente pai, por exemplo, ao montá-lo? Entre no código de um componente de terceiros, em um gancho montado para gerar um evento ... Não é uma boa ideia! Mas e se eu lhe disser que você não precisa! Em vez disso, podemos apenas ouvir o evento! O nome desse evento será o nome do gancho do ciclo de vida, mas o prefixo @hook: deve ser @hook: algo como @hook:___ , por exemplo: @hook:mounted, @hook:updated @hook:destroyed .

No código, será algo parecido com isto:

 //   ParentComponent.vue <template> <div> <ThirdPartyComponent @hook:mounted="usefulMethod"/> </div> </template> <script> import ThirdPartyComponent from 'vue-third-party-component' //   export default { name: 'ParentComponent', components: { ThirdPartyComponent }, data() { return {} }, methods: { usefulMethod() { //  -    mounted     } } } </script> 

Parece-me que essa é uma funcionalidade muito útil para trabalhar com componentes próprios e de terceiros. Espero que você ache útil. É um pouco estranho que não exista uma palavra na documentação e alguns recursos possam ser encontrados apenas lendo o código-fonte.

Obrigado pela leitura. Leia a doca e a fonte! E com o próximo ano de 2020!