{"id":43582,"date":"2021-08-03T12:09:01","date_gmt":"2021-08-03T10:09:01","guid":{"rendered":"https:\/\/kinsta.com\/?p=98454"},"modified":"2023-08-22T05:34:05","modified_gmt":"2023-08-22T08:34:05","slug":"vue-js","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/vue-js\/","title":{"rendered":"10 Coisas que Voc\u00ea Precisa Saber Sobre o Framework Front-end Vue.js"},"content":{"rendered":"

Com o cont\u00ednuo aumento das frameworks front-end JavaScript<\/a>, incluindo o novo Vue.js 3, tornou-se vital acompanh\u00e1-las e compreender tudo sobre suas novas caracter\u00edsticas.<\/p>\n

Neste artigo, vamos explorar o Vue.js 3 e seus novos recursos adicionadas<\/a>. Estas \u00faltimas adi\u00e7\u00f5es tornam o Vue.js ainda mais robusto, tornando-o uma \u00f3tima framework a ser considerada para seu pr\u00f3ximo projeto. Voc\u00ea aprender\u00e1 em detalhes 10 coisas que deve saber sobre o Vue.js e como ele o ajudar\u00e1 a fornecer aplicativos front-end escal\u00e1veis e de alto desempenho.<\/p>\n

Pronto? Vamos l\u00e1!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

O que \u00e9 Vue.js?<\/h2>\n

De acordo com Evan You, o criador do Vue.js:<\/p>\n

“O Vue.js \u00e9 uma solu\u00e7\u00e3o mais flex\u00edvel, menos opinante. \u00c9 apenas uma camada de interface para que voc\u00ea possa us\u00e1-lo como um recurso leve nas p\u00e1ginas ao inv\u00e9s de um SPA completo”.<\/em><\/p><\/blockquote>\n

Ele queria criar uma framework front-end t\u00e3o poderosa quanto a Angular<\/a>, mas tamb\u00e9m “mais leve” e mais flex\u00edvel, sem todos os plugins e conceitos desnecess\u00e1rios que v\u00eam com a Angular.<\/p>\n

O resultado foi o Vue.js, que \u00e9 uma das mais populares frameworks front-end em uso hoje em dia.<\/p>\n

\"O
O Vue.js \u00e9 a segunda framework front-end mais popular. (Fonte: State of JS 2020<\/a>)<\/figcaption><\/figure>\n\n

Por que os desenvolvedores usam o Vue.js<\/h2>\n

Diferentes raz\u00f5es impulsionam um desenvolvedor<\/a> a utilizar uma tecnologia espec\u00edfica. Vamos discutir por que achamos que voc\u00ea deve aprender o Vue.js.<\/p>\n

Para come\u00e7ar, o Vue.js \u00e9 uma das frameworks mais simples para a maioria dos desenvolvedores, j\u00e1 que esta framework usa JavaScript. Portanto, qualquer pessoa que tenha conhecimentos b\u00e1sicos de JavaScript ser\u00e1 capaz de desenvolver com o Vue.js.<\/p>\n

A ferramenta Vue CLI combinada com outras ferramentas de desenvolvimento<\/a> front-end faz da cria\u00e7\u00e3o do Vue.js uma brisa. Ele \u00e9 configurado com alguma funcionalidade por padr\u00e3o, mas voc\u00ea tamb\u00e9m pode construir c\u00f3digo com uma l\u00f3gica e framework DRY (Don’t Repeat Yourself).<\/p>\n

A reatividade tamb\u00e9m est\u00e1 embutida no Vue.js. Isso significa que a funcionalidade em tempo real que era popular na framework Angular \u00e9 uma brisa com o Vue.js. Por exemplo, voc\u00ea pode facilmente aplicar uma diretiva simples como o v-if<\/code> em seu aplicativo do Vue.js.<\/p>\n

A seguir, vamos discutir os principais pr\u00f3s e contras do Vue.js.<\/p>\n

Pr\u00f3s e contras do Vue.js<\/h2>\n

O Vue.js \u00e9 a segunda framework mais popular em uso hoje em dia. Vamos ver o que faz com que ela se mantenha com os desenvolvedores web, e o que os afasta.<\/p>\n

Pros do Vue.js<\/h3>\n

Vamos come\u00e7ar explorando os aspectos positivos do Vue.js.<\/p>\n

Tamanho pequeno<\/h4>\n

O Vue.js tem um tamanho muito pequeno para download de cerca de 18 KB, o que \u00e9 excelente em compara\u00e7\u00e3o com outras frameworks com tamanhos grandes. Entretanto, com esse tamanho, o Vue.js ter\u00e1 um impacto positivo na SEO e UX do seu aplicativo front-end<\/a>.<\/p>\n

Componente de arquivo \u00fanico e legibilidade<\/h4>\n

O Vue.js usa uma arquitetura baseada em componentes, separando assim grandes peda\u00e7os de c\u00f3digo em componentes menores. Al\u00e9m disso, no Vue.js, tudo \u00e9 um componente, e cada componente \u00e9 escrito com HTML, CSS e JavaScript, encorajando assim a legibilidade e a simplicidade.<\/p>\n

Sistema de ferramentas s\u00f3lidas<\/h4>\n

O Vue.js suporta muitas ferramentas de desenvolvimento front-end direto da caixa com pouca ou nenhuma configura\u00e7\u00e3o de sua parte. Por exemplo, o Vue.js suporta ferramentas tais como Babel e Webpack<\/a>. Al\u00e9m disso, ele fornece testes unit\u00e1rios, bibliotecas de teste ponta a ponta, sistemas de roteamento flex\u00edveis e f\u00e1ceis de usar, gerentes estaduais, renderiza\u00e7\u00e3o do lado do servidor (SSR), e muito mais.<\/p>\n

F\u00e1cil de usar<\/h4>\n

Se voc\u00ea j\u00e1 usou o Vue.js antes, voc\u00ea concordar\u00e1 que \u00e9 muito f\u00e1cil de usar. Ele moderniza a abordagem usual de desenvolvimento web, tornando f\u00e1cil para qualquer iniciante entrar e se sentir confort\u00e1vel com apenas algumas pr\u00e1ticas.<\/p>\n

Contras do Vue.js<\/h3>\n

Agora que cobrimos os profissionais, vamos explorar os aspectos negativos do Vue.js.<\/p>\n

Complexidade de reatividade<\/h4>\n

A implementa\u00e7\u00e3o de liga\u00e7\u00e3o bidirecional no Vue.js \u00e9 uma ferramenta \u00fatil para gerenciar os componentes do Vue.js. A liga\u00e7\u00e3o bidirecional refere-se ao compartilhamento de dados entre uma classe de componentes e seu modelo, e \u00e9 desenvolvida para que, se os dados mudarem em um lugar, ele atualize automaticamente os outros.<\/p>\n

No entanto, h\u00e1 uma quest\u00e3o relativa a como a reatividade funciona enquanto o sistema de reatividade reenvia apenas os peda\u00e7os de dados disparados. \u00c0s vezes, h\u00e1 alguns erros durante a leitura dos dados, portanto, \u00e9 necess\u00e1rio que os dados sejam achatados. Voc\u00ea pode ler esta quest\u00e3o conhecida e como ela \u00e9 abordada no site da Vue.js<\/a>.<\/p>\n

Barreira das linguagens<\/h4>\n

Inicialmente, o Vue.js foi adotado principalmente pelos chineses, com grandes empresas como a Xiaomi e Alibaba ajudando a popularizar a framework e criando demanda no mercado de trabalho. Entretanto, com a ado\u00e7\u00e3o significativa de muitas empresas chinesas, muitos f\u00f3runs, canais de discuss\u00e3o e similares foram principalmente em chin\u00eas, tornando a ado\u00e7\u00e3o dif\u00edcil para desenvolvedores n\u00e3o falantes nativos.<\/p>\n

A partir de hoje, este n\u00e3o \u00e9 mais o caso, pois o Vue.js evoluiu para incorporar suporte para v\u00e1rias linguagens<\/a>, mas h\u00e1 algumas linguagens por a\u00ed com menos suporte do que os outros.<\/p>\n

Riscos de sobre-flexibilidade<\/h4>\n

Como dito acima, o Vue.js \u00e9 muito flex\u00edvel e f\u00e1cil de usar. Portanto, \u00e9 f\u00e1cil ter muitos c\u00f3digos de spaghetti em todos os lugares, pois todos em uma equipe empresarial podem ter opini\u00f5es diferentes sobre como fazer as coisas.<\/p>\n

Pelos pr\u00f3s e contras do Vue.js discutidos acima, voc\u00ea j\u00e1 deve ter percebido alguns recursos que voc\u00ea ama e algumas que n\u00e3o funcionar\u00e3o bem para voc\u00ea.<\/p>\n

10 Coisas que voc\u00ea deve saber sobre o Vue.js<\/h2>\n

Abaixo est\u00e3o as dez coisas que voc\u00ea precisa saber sobre o Vue.js e porque \u00e9 essencial conhec\u00ea-las.<\/p>\n

Propriedades computadorizadas<\/h3>\n

Uma propriedade computada \u00e9 uma das caracter\u00edsticas mais utilizadas no Vue.js. Uma propriedade computada permite criar propriedades que podem ser modificadas, manipuladas e exibir dados de uma maneira eficiente e leg\u00edvel.<\/p>\n

\u00c9 \u00fatil quando voc\u00ea quer repetir muitos pequenos m\u00e9todos para coisas como formata\u00e7\u00e3o, mudan\u00e7a de valores ou um vasto processo que voc\u00ea precisa acionar em certas situa\u00e7\u00f5es.<\/p>\n

As propriedades computadorizadas ajudam a remover o excesso de muita l\u00f3gica em seu modelo. Muito dessa l\u00f3gica pode fazer com que seu c\u00f3digo se torne inchado e dif\u00edcil de manter rapidamente.<\/p>\n

Assumindo que voc\u00ea queira formatar um cordel em letras mai\u00fasculas, aqui est\u00e1 como voc\u00ea pode fazer isso:<\/p>\n

<template>\n  <div>\n    <p> I love {{ value.toUpperCase() }} <\/p>\n  <\/div>\n<\/template>\n<\/code><\/pre>\n
O que acontece se voc\u00ea precisar mudar a vari\u00e1vel value<\/code> em 50 lugares diferentes? Bloqueado, certo? Bem, as propriedades computadas<\/a> est\u00e3o aqui para ajudar:<\/p>\n
<template>\n  <div>\n    <p> I love {{ value }} <\/p>\n  <\/div>\n<\/template>\n<script>\n  export default {\n    computed:{\n      value(){\n        return this.value.toUpperCase()\n      }\n    }\n  }\n<\/script><\/code><\/pre>\n
Voc\u00ea pode facilmente mudar toUpperCase()<\/code> para toLowerCase()<\/code>, e isso refletir\u00e1 tudo a partir de um \u00fanico ponto.<\/p>\n
Manuseio de eventos<\/h3>\n
O Vue.js faz da comunica\u00e7\u00e3o do filho e do pai uma brisa com o uso de $emit<\/code> e v-on<\/code>. Torna-se f\u00e1cil e simples lidar com a comunica\u00e7\u00e3o entre as hierarquias de componentes.<\/p>\n
A fun\u00e7\u00e3o $emit<\/code> aceita dois par\u00e2metros: uma string para o nome e um valor opcional a ser emitido.<\/p>\n
O nome do v-on:event-name<\/code> usado no componente filho para receber o evento emitido por seu componente pai:<\/p>\n
<template>\n  <section>\n    <button @click=\"onClick\">Add <\/button>\n  <\/section>\n<\/template>\n<script>\nexport default {\n  name: \"AddEvent\",\n  methods: {\n    onClick() { \n      this.$emit('add', this.data);\n    }\n  }\n}\n<\/script><\/code><\/pre>\n
Uma vez acionado o bot\u00e3o Add<\/code>, o m\u00e9todo onClick<\/code> aciona o evento $emit<\/code>, que emite o evento add<\/code> a um componente filho que escuta o evento de add<\/code>.<\/p>\n
Vamos dar uma olhada em como ouvir um evento:<\/p>\n
<template>\n  <section>\n  <p v-show=\"showSaveMsg\">This component is listening to the ADD event<\/p>\n  <add-event v-on:add=\"onAdd\"><\/add-event>\n  <\/section>\n<\/template>\n<script>\nexport default {\n  data(){\n    return {\n      showSaveMsg: false\n    }\n  },\n  components:{\n    AddEvent: () => import('.\/AddEvent')\n  },\n  methods: {\n    onAdd() { \n        this.showSaveMsg = true;\n    }\n  }\n}\n<\/script><\/code><\/pre>\n
O c\u00f3digo acima ouve o evento de add<\/code> e responde mudando o valor de showSaveMsg<\/code> para true<\/code>, o que mostra a mensagem novamente.<\/p>\n
Carregamento pregui\u00e7oso \/ Componentes Async<\/h3>\n
O carregamento pregui\u00e7oso<\/a> \u00e9 um dos melhores hacks de desempenho para o Vue.js, onde os componentes s\u00e3o adicionados e renderizados de forma ass\u00edncrona ou sob demanda, o que reduzir\u00e1 significativamente o tamanho do arquivo, o tempo de resposta a solicita\u00e7\u00f5es HTTP e assim por diante.<\/p>\n
O carregamento pregui\u00e7oso \u00e9 alcan\u00e7ado com importa\u00e7\u00f5es din\u00e2micas de Webpack, que tamb\u00e9m suporta divis\u00e3o de c\u00f3digo.<\/p>\n
O Vue.js permite o carregamento pregui\u00e7oso de componentes e pode ser alcan\u00e7ado globalmente com os seguintes scripts:<\/p>\n
import Vue from \"vue\";\nVue.component(\"new-component\", () => import(\".\/components\/NewComponent.vue\"));\n<\/code><\/pre>\n
Voc\u00ea pode consegui-lo localmente com um componente como abaixo:<\/p>\n
<template>\n  <div>\n    <component><\/component>\n  <\/div>\n<\/template>\n<script>\nexport default {\n  components: {\n    'Component': () => import('.\/Component')\n  }\n}\n<\/script><\/code><\/pre>\n
Componentes globais<\/h3>\n
Podemos alcan\u00e7ar uma reusabilidade significativa no Vue.js com componentes globais, onde voc\u00ea registra um componente uma vez e depois o usa em qualquer lugar dentro de sua inst\u00e2ncia do Vue.js.<\/p>\n
Componentes globais s\u00e3o recursos importante e podem economizar muito tempo registrando componentes individualmente cada vez, mas podem ser facilmente mal utilizados registrando todos os componentes globalmente. O registro de todos os componentes globalmente pode facilmente levar a um tamanho de constru\u00e7\u00e3o grande, resultando em SEO deficiente e tempo de carregamento de p\u00e1gina<\/a> mais lento.<\/p>\n
Certifique-se sempre de registrar componentes globais que tenham muitos casos de uso em todo o seu projeto, como mostrado abaixo:<\/p>\n
import Vue from \"vue\";\nVue.component(\"new-component\", () => import(\".\/componetns\/NewComponent.vue\"));<\/code><\/pre>\n
Componente de arquivo \u00fanico<\/h3>\n
Uma das caracter\u00edsticas mais poderosas do Vue.js \u00e9 Componentes; ele ajuda a estender elementos HTML essenciais, CSS e JavaScript para encapsular c\u00f3digo reutiliz\u00e1vel.<\/p>\n
Os componentes podem ajudar a quebrar grandes projetos em pe\u00e7as menores e reutiliz\u00e1veis que podemos estender por todo o projeto, encorajando assim o princ\u00edpio DRY (Don’t Repeat Yourself) da engenharia de software.<\/p>\n
Ele pode fornecer organiza\u00e7\u00e3o e encapsulamentos para grandes projetos, c\u00f3digo reutiliz\u00e1vel, e pode ser separado em arquivos .vue<\/code>.<\/p>\n
<template>\n  <section>\n    <button @click=\"onClick\">Add<\/button>\n  <\/section>\n<\/template>\n\n<script>\nexport default {\n  name: \"CustomButtom\",\n  methods: {\n    onClick() { \n      this.$emit('add', this.data);\n    }\n  }\n}\n<\/script>\n\n<style scoped>\n  button{\n    \/** Button Styles *\/\n  }\n<\/style><\/code><\/pre>\n
Os scripts acima criam um componente de bot\u00e3o personalizado que podemos reutilizar dentro de nosso projeto. Cada componente tem seu HTML, CSS, e JavaScript.<\/p>\n
Teste<\/h3>\n
O Vue.js fornece uma das bibliotecas de testes mais robustas, tornando os testes unit\u00e1rios com Jest e Mocha ou os testes<\/a> de ponta a ponta uma brisa com pouca ou nenhuma configura\u00e7\u00e3o.<\/p>\n
Uma r\u00e1pida an\u00e1lise com estas ferramentas pode valer a pena para voc\u00ea. Ent\u00e3o, vamos explorar a instala\u00e7\u00e3o, configura\u00e7\u00e3o e teste de um projeto demonstrativo abaixo.<\/p>\n
Se voc\u00ea estiver usando a ferramenta Vue CLI recomendada<\/a> para configurar seu projeto, execute os seguintes comandos:<\/p>\n
vue add unit-jest \/\/to run unit test with jest\n\nnpm install --save-dev @vue\/test-utils\n<\/code><\/pre>\n
Em seguida, ap\u00f3s a configura\u00e7\u00e3o, inclua o c\u00f3digo abaixo, que demonstra como testar um componente simples:<\/p>\n
\/\/ Import the `mount()` method from Vue Test Utils\nimport { mount } from '@vue\/test-utils'\n\n\/\/ The component to test\nconst MessageComponent = {\n  template: '<p>{{ message }}<\/p>',\n  props: ['message']\n}\n\ntest('displays a message', () => {\n  \/\/ mount() returns a wrapped Vue component we can interact with\n  const wrapper = mount(MessageComponent, {\n    propsData: {\n      msg: 'Welcome to our testing world'\n    }\n  })\n\n  \/\/ Assert the rendered text of the component\n  expect(wrapper.text()).toContain('Welcome to our testing world')\n})<\/code><\/pre>\n
A Biblioteca de Testes de Vue tem duas \u00f3timas op\u00e7\u00f5es para testar seus componentes: Montagem e Raso.<\/p>\n
Se voc\u00ea quiser testar um componente com isolamento completo, use o m\u00e9todo shallow<\/code>. Caso contr\u00e1rio, se voc\u00ea precisar trabalhar em um componente com subcomponentes que deseja garantir a comunica\u00e7\u00e3o, a op\u00e7\u00e3o de mount<\/code> funciona muito bem.<\/p>\n
A poderosa ferramenta Vue CLI<\/h3>\n
A Vue CLI \u00e9 uma excelente ferramenta CLI<\/a> e d\u00e1 um bom poder a qualquer desenvolvedor de Vue. Com ela, voc\u00ea pode testar rapidamente qualquer componente isoladamente. O \u00f3timo do Vue CLI \u00e9 que voc\u00ea pode desenvolver completamente um componente em isolamento, test\u00e1-lo e ainda ter acesso \u00e0 recarga a quente \u00e0 medida que voc\u00ea itera sobre aquele componente em particular.<\/p>\n
Para demonstrar, vamos instalar a Vue CLI globalmente:<\/p>\n
npm install -g @vue\/cli<\/code><\/pre>\n
Em seguida, voc\u00ea pode testar qualquer componente, executando o comando abaixo:<\/p>\n
vue serve .\/components\/views\/Home.vue<\/code><\/pre>\n
Se voc\u00ea deseja retirar um determinado componente para, digamos, compartilh\u00e1-lo com seus colegas, voc\u00ea pode conseguir isso usando o comando abaixo:<\/p>\n
vue build --target lib --name goldenRule .\/components\/views\/Home<\/code><\/pre>\n
O Vue CLI \u00e9 muito poderoso e pode economizar uma tonelada de tempo produtivo se voc\u00ea dominar a arte de us\u00e1-lo. Se voc\u00ea quiser saber mais, voc\u00ea pode dar uma olhada na documenta\u00e7\u00e3o oficial<\/a>.<\/p>\n
Gerenciamento de propriedade<\/h3>\n
O gerenciamento de propriedade \u00e9 vital para o componente Vue, pois ele pode ser criado de diferentes maneiras. Voc\u00ea tamb\u00e9m pode validar os adere\u00e7os, criar v\u00e1rios adere\u00e7os e modific\u00e1-los conforme necess\u00e1rio.<\/p>\n
Para criar uma nova propriedade em um componente Vue, voc\u00ea pode faz\u00ea-lo de v\u00e1rias maneiras diferentes. Assumindo que voc\u00ea tenha seu componente, voc\u00ea precisa criar o adere\u00e7o isAdmin<\/code>.<\/p>\n
Vejamos as diferentes maneiras que voc\u00ea poderia fazer isso:<\/p>\n
<template>\n  <section>\n    <component v-if=\"isAdmin\"><\/component>\n  <\/section>\n<\/template>\n<script>\nexport default {\n  name: 'Component',\n\n \/\/ One\n  props: {\n    isAdmin: {\n      type: Boolean,\n      default: false,\n      required: true\n    }\n  },\n \n \/\/ Two\n  props: ['isAdmin'],\n\n \/\/ Three\n  props: {\n    isAdmin: Boolean\n  }\n\n}\n<\/script><\/code><\/pre>\n
A valida\u00e7\u00e3o de seu adere\u00e7o \u00e9 muito importante. Por sorte, \u00e9 tamb\u00e9m muito simples:<\/p>\n
\/\/ ...\n\n \/\/ One\n  props: {\n    isAdmin: {\n      default: false,\n      required: true,\n      validator: function(value) {\n        return typeof === 'boolean';\n      }\n    }\n  },\n\n\/\/ ...<\/code><\/pre>\n
Finalmente, modificar as propiedades \u00e9 t\u00e3o f\u00e1cil quanto realinhar seus valores:<\/h3>\n
\/\/...\n\nmethods: {\n  isAdmin() {\n    this.isAdmin = true;\n  }\n}\n\n\/\/..\n<\/code><\/pre>\n
Atribuir valor ao prumo em um componente pai:<\/p>\n
<template>\n  <section>\n    <component :isAdmin=\"true\"><\/component>\n  <\/section>\n<\/template><\/code><\/pre>\n
Renderiza\u00e7\u00e3o do lado do servidor (SSR)<\/h3>\n
Com todas as grandes caracter\u00edsticas e benef\u00edcios de usar o Vue.js para criar aplicativos front-end, o pr\u00f3prio Vue.js ainda \u00e9 uma biblioteca do lado do cliente que s\u00f3 renderiza e manipula elementos DOM.<\/p>\n
A renderiza\u00e7\u00e3o do lado do servidor ajuda as frameworks do lado do cliente, como o Vue.js, a obter melhores resultados. Os rastreadores web dos mecanismos de pesquisas (Search Engine crawlers) ver\u00e3o p\u00e1ginas totalmente renderizadas do seu site.<\/p>\n
Para ter seu site indexado<\/a> pelo Google e Bing mais rapidamente, seu site precisa ter uma pontua\u00e7\u00e3o mais r\u00e1pida e maior tempo para o conte\u00fado. \u00c9 isso que a renderiza\u00e7\u00e3o do lado do servidor no Vue.js ajuda voc\u00ea a alcan\u00e7ar.<\/p>\n
A renderiza\u00e7\u00e3o do lado do servidor (SSR) \u00e9 uma t\u00e9cnica popular para renderizar um aplicativo de p\u00e1gina \u00fanica (SPA) regular do lado do cliente no servidor e depois enviar uma p\u00e1gina totalmente renderizada para o leitor.<\/p>\n
Quando a p\u00e1gina \u00e9 renderizada no lado do servidor, ela a envia para o cliente como resposta. Assim, cada informa\u00e7\u00e3o j\u00e1 foi renderizada enquanto o navegador exibe a p\u00e1gina do mecanismo de busca.<\/p>\n
Alcan\u00e7ar a SSR no Vue.js<\/a> \u00e9 dif\u00edcil para os iniciantes. Ser\u00e1 mais f\u00e1cil usar o Nuxt.js<\/a>, que tem uma SSR incorporada e uma curva de aprendizado muito baixa.<\/p>\n
Implanta\u00e7\u00e3o<\/h3>\n
O Vue.js apresentar\u00e1 muitos avisos, erros e tamanhos de arquivos inchados durante o desenvolvimento, mas estes problemas desaparecem imediatamente quando voc\u00ea liga a produ\u00e7\u00e3o para a implanta\u00e7\u00e3o. O Vue.js configurar\u00e1 automaticamente ferramentas de constru\u00e7\u00e3o de Webpack, minifications<\/a>, extra\u00e7\u00e3o e purga de CSS, cache, rastreamento de erros de tempo de execu\u00e7\u00e3o, e muito mais.<\/p>\n
Os clientes Kinsta<\/a> podem considerar o uso do recurso embutido de minifica\u00e7\u00e3o de c\u00f3digo<\/a> que eles podem acessar diretamente no painel MyKinsta<\/a>. Isto lhes permite ativar facilmente a minifica\u00e7\u00e3o autom\u00e1tica de CSS e JavaScript com um simples clique.<\/p>\n
O Vue.js torna seu processo de implanta\u00e7\u00e3o muito f\u00e1cil, configurando e configurando automaticamente o ambiente de produ\u00e7\u00e3o sem nenhum passo extra do desenvolvedor.<\/p>\n
Para implantar seu <\/a>aplicativo<\/a> Vue.js<\/a>, voc\u00ea pode ler seus guias gerais.<\/p>\n\n
Resumo<\/h2>\n
Neste artigo, exploramos em detalhes o que \u00e9 o Vue.js, por que voc\u00ea deve us\u00e1-lo, seus pr\u00f3s e contras, e as 10 coisas que voc\u00ea deve saber sobre ele.<\/p>\n
Esperamos que voc\u00ea tenha avan\u00e7ado seus conhecimentos sobre o Vue.js para oferecer aplicativos front-end escal\u00e1veis e de alto desempenho.<\/p>\n
Continue codificando!<\/p>\n
Se voc\u00ea tiver perguntas ou sugest\u00f5es, estamos ansiosos para ouvir de voc\u00ea. Fale conosco na se\u00e7\u00e3o de coment\u00e1rios abaixo!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Com o cont\u00ednuo aumento das frameworks front-end JavaScript, incluindo o novo Vue.js 3, tornou-se vital acompanh\u00e1-las e compreender tudo sobre suas novas caracter\u00edsticas. Neste artigo, vamos …<\/p>\n","protected":false},"author":193,"featured_media":43584,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[460,515],"topic":[977,978,1014],"class_list":["post-43582","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-javascript-frameworks","tag-vue-js","topic-frameworks-javascript","topic-tutoriais-javascript","topic-vue-js"],"yoast_head":"\n10 Coisas que Voc\u00ea Precisa Saber Sobre o Framework Front-end Vue.js<\/title>\n<meta name=\"description\" content=\"Explore 10 raz\u00f5es pelas quais voc\u00ea deve dar ao Vue.js um segundo olhar como uma biblioteca JS de interface para seu pr\u00f3ximo projeto de desenvolvimento web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/vue-js\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Coisas que Voc\u00ea Precisa Saber Sobre o Framework Front-end Vue.js\" \/>\n<meta property=\"og:description\" content=\"Explore 10 raz\u00f5es pelas quais voc\u00ea deve dar ao Vue.js um segundo olhar como uma biblioteca JS de interface para seu pr\u00f3ximo projeto de desenvolvimento web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/vue-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-03T10:09:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-22T08:34:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/08\/what-to-know-about-vue-js.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Solomon Eseme\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Explore 10 raz\u00f5es pelas quais voc\u00ea deve dar ao Vue.js um segundo olhar como uma biblioteca JS de interface para seu pr\u00f3ximo projeto de desenvolvimento web.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/08\/what-to-know-about-vue-js.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@kaperskyguru\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Solomon Eseme\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/vue-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/vue-js\/\"},\"author\":{\"name\":\"Solomon Eseme\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2\"},\"headline\":\"10 Coisas que Voc\u00ea Precisa Saber Sobre o Framework Front-end Vue.js\",\"datePublished\":\"2021-08-03T10:09:01+00:00\",\"dateModified\":\"2023-08-22T08:34:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/vue-js\/\"},\"wordCount\":2557,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/vue-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/08\/what-to-know-about-vue-js.jpeg\",\"keywords\":[\"JavaScript Frameworks\",\"vue.js\"],\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/vue-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/vue-js\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/vue-js\/\",\"name\":\"10 Coisas que Voc\u00ea Precisa Saber Sobre o Framework Front-end Vue.js\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/vue-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/vue-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/08\/what-to-know-about-vue-js.jpeg\",\"datePublished\":\"2021-08-03T10:09:01+00:00\",\"dateModified\":\"2023-08-22T08:34:05+00:00\",\"description\":\"Explore 10 raz\u00f5es pelas quais voc\u00ea deve dar ao Vue.js um segundo olhar como uma biblioteca JS de interface para seu pr\u00f3ximo projeto de desenvolvimento web.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/vue-js\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/vue-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/vue-js\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/08\/what-to-know-about-vue-js.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/08\/what-to-know-about-vue-js.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"10 Coisas que voc\u00ea precisa saber sobre o Vue.js Frontend Framework\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/vue-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frameworks JavaScript\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/frameworks-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"10 Coisas que Voc\u00ea Precisa Saber Sobre o Framework Front-end Vue.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2\",\"name\":\"Solomon Eseme\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g\",\"caption\":\"Solomon Eseme\"},\"description\":\"I am a Software Engineer and Content Creator who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend.com. Follow me on Twitter, LinkedIn, and About Me\",\"sameAs\":[\"https:\/\/masteringbackend.com\",\"https:\/\/linkedin.com\/in\/solomoneseme\",\"https:\/\/x.com\/kaperskyguru\"],\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/solomoneseme\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"10 Coisas que Voc\u00ea Precisa Saber Sobre o Framework Front-end Vue.js","description":"Explore 10 raz\u00f5es pelas quais voc\u00ea deve dar ao Vue.js um segundo olhar como uma biblioteca JS de interface para seu pr\u00f3ximo projeto de desenvolvimento web.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/vue-js\/","og_locale":"pt_PT","og_type":"article","og_title":"10 Coisas que Voc\u00ea Precisa Saber Sobre o Framework Front-end Vue.js","og_description":"Explore 10 raz\u00f5es pelas quais voc\u00ea deve dar ao Vue.js um segundo olhar como uma biblioteca JS de interface para seu pr\u00f3ximo projeto de desenvolvimento web.","og_url":"https:\/\/kinsta.com\/pt\/blog\/vue-js\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2021-08-03T10:09:01+00:00","article_modified_time":"2023-08-22T08:34:05+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/08\/what-to-know-about-vue-js.jpeg","type":"image\/jpeg"}],"author":"Solomon Eseme","twitter_card":"summary_large_image","twitter_description":"Explore 10 raz\u00f5es pelas quais voc\u00ea deve dar ao Vue.js um segundo olhar como uma biblioteca JS de interface para seu pr\u00f3ximo projeto de desenvolvimento web.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/08\/what-to-know-about-vue-js.jpeg","twitter_creator":"@kaperskyguru","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Solomon Eseme","Tempo estimado de leitura":"12 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/vue-js\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/vue-js\/"},"author":{"name":"Solomon Eseme","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2"},"headline":"10 Coisas que Voc\u00ea Precisa Saber Sobre o Framework Front-end Vue.js","datePublished":"2021-08-03T10:09:01+00:00","dateModified":"2023-08-22T08:34:05+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/vue-js\/"},"wordCount":2557,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/vue-js\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/08\/what-to-know-about-vue-js.jpeg","keywords":["JavaScript Frameworks","vue.js"],"inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/vue-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/vue-js\/","url":"https:\/\/kinsta.com\/pt\/blog\/vue-js\/","name":"10 Coisas que Voc\u00ea Precisa Saber Sobre o Framework Front-end Vue.js","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/vue-js\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/vue-js\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/08\/what-to-know-about-vue-js.jpeg","datePublished":"2021-08-03T10:09:01+00:00","dateModified":"2023-08-22T08:34:05+00:00","description":"Explore 10 raz\u00f5es pelas quais voc\u00ea deve dar ao Vue.js um segundo olhar como uma biblioteca JS de interface para seu pr\u00f3ximo projeto de desenvolvimento web.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/vue-js\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/vue-js\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/vue-js\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/08\/what-to-know-about-vue-js.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/08\/what-to-know-about-vue-js.jpeg","width":1460,"height":730,"caption":"10 Coisas que voc\u00ea precisa saber sobre o Vue.js Frontend Framework"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/vue-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Frameworks JavaScript","item":"https:\/\/kinsta.com\/pt\/topicos\/frameworks-javascript\/"},{"@type":"ListItem","position":3,"name":"10 Coisas que Voc\u00ea Precisa Saber Sobre o Framework Front-end Vue.js"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2","name":"Solomon Eseme","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g","caption":"Solomon Eseme"},"description":"I am a Software Engineer and Content Creator who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend.com. Follow me on Twitter, LinkedIn, and About Me","sameAs":["https:\/\/masteringbackend.com","https:\/\/linkedin.com\/in\/solomoneseme","https:\/\/x.com\/kaperskyguru"],"url":"https:\/\/kinsta.com\/pt\/blog\/author\/solomoneseme\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/43582","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/193"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=43582"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/43582\/revisions"}],"predecessor-version":[{"id":48918,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/43582\/revisions\/48918"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43582\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43582\/translations\/it"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43582\/translations\/de"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43582\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43582\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43582\/translations\/fr"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43582\/translations\/nl"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43582\/translations\/se"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/43582\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/43584"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=43582"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=43582"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=43582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}