Quais as vantagens de usar scoped em um componente do Vue?

Como funciona um estilo com escopo no Vue?

Quem usa o Vue.js, já está familiarizado ao uso do sfc (single file component). Quando você define uma tag <style> com o atributo scoped, todo o CSS definido dentro desta tag será aplicado somente aos elementos do componente atual.

Veja como isto funciona na prática:

<template>
  <div class="exemplo">Exemplo</div>
</template>
<style scoped>
  .exemplo {
    color: green;
  }
</style>

O resultado da definição acima seria algo parecido com:

<style>
.exemplo[data-v-f3f3eg9] {
   color: green;
 }
</style>
<template>
  <div class="exemplo" data-v-f3f3eg9>Exemplo</div>
</template>

Perceba que, no exemplo acima, o resultado final de se usar scoped é que todos os elementos definidos no componentes são "compilados" com um atributo dataset único e, além do seletor que foi usado para definir o estilo CSS, o mesmo é adicionado como parte do seletor. No nosso caso, o data-v-f3f3eg9 foi adicionado.

E quais são as vantagens de usar scoped?

Como dito no início desta publicação, o scoped aplica o CSS apenas sobre os elementos definidos em um determinado componente.

A grande vantagem de se usar scoped é que você poderá definir os seus estilos para os elementos dos componentes, sem a necessidade de se preocupar com eventuais conflitos causados por colisões de nome de classes ou seletores utilizados.

Por exemplo, é muito comum utilizar a classe .container em algumas bibliotecas ou frameworks CSS, ou mesmo em seus próprios estilos. Com scoped, você poderia definir um elemento com a classe .container, com as definições necessárias, sem se preocupar com outras definições .

Por exemplo:

/** definição global **/
.container{
   width: 100%;
   max-width: 1000px;
   margin-left: auto;   
   margin-right: auto;
}

<template>
   <div class="container">Meu container rosa</div>
</template>
<style scoped>
.container{
   background-color: pink;
}
</style>

No exemplo acima, usamos a classe .container, porém poderíamos utilizar outros seletores mais simples como label, ul ou a, sem se preocupar com essas definições afetarem elementos externos ao componente.

Scoped pode te ajudar a evitar problemas

Em alguns projetos que trabalhei, já presenciei casos onde um determinado desenvolvedor definiu vários styles sem utilizar o atributo scoped nos componentes do projeto. O resultado foi que alguns elementos, que não faziam parte destes componentes, foram afetados, como se o estilo viesse de uma folha de estilo definida globalmente. Sendo mais específico, o problema foi causado por definições de estilos que usavam seletores de tags, como h1 ou label. Então, ao navegar até uma página em que existia essa definição e, em seguida, para outras páginas, os elementos que não deveriam ser afetados pelo estilo deste determinado componente sofreram alterações que quebraram todo o layout.

Conclusão

A conclusão disso é que, se existe a decisão de criar estilos que utilizam seletores comuns, como nome de tags ou classes muito utilizados em determinadas convenções, você deve utilizar scoped para evitar esses problemas. Esta com certeza, é uma prática boa e recomendada ao criar seus componentes no Vue.js.