Curso gratuito Vue.js 3 INTRO #10 - Propriedade computada (computed)

e Fala jovem Thiago Matos aqui vamos lá para um assunto muito top que são as propriedades computados vem comigo cara a situação aqui é a seguinte vamos lá e pateticamente a gente tem um objeto aqui usa e aqui a gente tem força name a usa exemplo em todas as aulas on elastic Man o stop certo e aí se a gente quiser ensinou se a gente quiser imprimir o nome completo desse cara a gente iria fazer isso daqui né deusa marceneiro e usa lá se der certo na hora de errado isso tá fazer a gente perde

tempo a gente pede né habilidades a gente perde muita coisa aqui produtividade então quando isso acontecer quando você quer monta uma digamos uma rotina você quer montar um valor baseado em outros valores certo é um valor final é o nome completo mas que ele Depende de outros valores aí depende de dois outros valores Então quando você quiser montar essa rotina de fazer um produto final né um valor final que dependa de outros valores é o que a gente chama de propriedades computados ou com outras properties in é uma nova camada aqui do nosso componente ontem

nova camada de configuração E aí nessa competentes e a gente vai declarar funções essa funções vão ser tratadas como um apenas um campo normal você vai ver aqui eu vou colocar fundo em ela é uma função e o que que essa função vai retornar essa função vai retornar o nome completo desse cara tá certo vai ser o Francine eu lá cinema e aqui galera a gente já entra num num outro modo a técnica bastante legal como é que a gente acessa como é que a gente acessa esses valores daqui do data na nos metros com

pedale ou seja dentro daqui das configurações do componente Porque aqui no template a gente já viu que a gente coloca interpolação aqui galera a gente acessa com deles ou seja diz é o próprio componente a própria Instância do componente e antes de a gente prosseguir Vamos fazer uma brincadeira aqui ó log6 Opa deixa eu criar uma função aqui clique vamos voltar à aula aí passada dia vinte e colocar o deles aqui só para vocês entenderem botão@Plate e aí vai ser clique aqui é é é o pa o erro aqui é só propriedade é Beleza deixa

eu abrir o console E se eu clicar eu tenho aqui ó o proxy que é o próprio Instância do componente e na Instância do componente eu tenho acesso a todo tá vendo usuário aqui ó a função clips Tá certo eu tenho outras coisas aqui a tudo sobre o data é um proxy também que esse próprio que é onde o verde essa faz toda a atividade dele certo é atributos do componente todas as informações de componentes E aí o verde é se coloca esses caras aqui já de mão beijada Para gente para a gente ter acesso

né a gente não precisa acessar esse cara conto data etc porque tá dentro de data Você já faz isso diretamente USA a fé e aí cliquei acessei aqui usuário Tá certo forcei laço né é um deles é para acessar a distância do vídeo E aí. O que você quiser acessar pode ser método pode ser a cumprir outra ele pode ser data pode ser o que for então mais um assunto aí legal você me produzida aqui na aula então beleza galera aqui já sabemos o disse então a gente vai fazer a montagem desse nome completo né

então vai ser Edis e usa first Name só que a gente vai fazer interpolação aqui ó é template Strange né para poder concatenar as coisas aqui então Observe aqui é deles né Observe que a gente está montando o valor final bom né de acordo com valores né aqui é uma dependência E aí a gente precisa retornar esse cara porque essa função daqui na verdade vai ser tratado como uma propriedade normal E aí se a gente pegar esse cara aqui a gente pode imprimir né direto o Nemo qual é a vantagem disso primeiro que Verde essa

vai cachear isso daqui aqui vai ficar bem rápido e isso daqui vai ser re computador toda vez que a gente alterar qualquer valores aqui internamente a gente tá está isso deixa eu ver se eu já fiz aqui dentro de mim já fiz passa o seguinte ó abre aqui em meio ponto de JS e coloque essa variável aqui Window. É Ou seja a gente está pendurando o viu DS numa variável Global chamada era beleza Salve E aí a gente tem acesso a essa variável aqui ó beleza aí a Estância lá do verde é essa que a

gente acabou de ver show de bola aí a gente pode acessar é. Oi Nilza vai virar objeto é ponto de usa first Name vai ver o first Name Opa até o francinei Thiago agora Não beleza aí sim agora se eu quiser alterar o nome para Thiago olha só que vai acontecer Tiago ensinou ele atualizou ou seja isso daqui for é computado por quê Por Cilene é uma dependência e qualquer dependência que essa função tenha vai ser reputado isso é muito legal e muito poderoso e agora vds que achei essa daqui você pode chamar isso aqui

de novo em qualquer lugar ele não vai rodar ele não vai computar porque essa daqui já foi computado ele vai ser ele vai só computar novamente quando a maximizar as dependências dele se alterar aí você já vai me perguntar que eu tenho certeza Tiago portão não poderia criar um método aqui E por que que eu não poderia criar um microfone e fazer a mesma coisa retornar e aqui vai ter que ser uma Executar a função beleza tá lá funcionou isso é alterar aqui de novo vai funcionar aí funcionou Tá certo ele não executou eu ver

de novo aqui funcionou exato até achei estranho de não tem funcionado ele funcionou mas aí qual é a diferença cara a diferença aqui toda vez que você utilizar isso daqui né em qualquer parte do sistema ele vai recompor tá isso aqui toda hora né E nesse caso aqui quando você chamar o fundo mesmo ele já está cacheado ele só vai ver computar quando first Name ouro assim né me alterado por isso que é mais indicado utilizar né aconteceu three quando você tem que fazer o valor final que depende de outros valores e essa dependência cara

pode ser qualquer Campo aqui no data Tá certo que pode ser outras coisas que a gente vai vir no futuro a bola o negro aqui você já entendeu Para que serve a completas aí eu vou dar um outro exemplo aqui também muito show para você entender como funciona a competência aqui também a gente pode fazer filtros com ele lembre-se que a gente fez um exemplo de tudo isso né Vou colocar aqui de sal parecer roda de novo tudo certo vou pegar essa futebolista aqui lembro que a gente fez evento lá no início do curso tão

e o doce lá e imprimir aqui cara eu não salvei lá posso fazer tudo de novo então é bom que a gente realiza né Deixa de preguiça vamos lá que a gente revisa Deixa o fundo aí me aí para vocês pegarem no repositório e aqui eu vou imprimir novamente a estudos aí para revisar ver for tudo em tudo e lembre-se que quando a gente está utilizando um grupo de logicamente a interessante a gente utilizar que para facilitar deixar o PS mais rápido tudo. Edé e aqui eu vou imprimir outro dou e é o que passou

batom beleza vamos ver como ficou o show de bola aqui já as nossas T2 cara aí eu vou imprimir aqui você tá completo ou não completas completas etc aí eu vou fazer o seguinte aqui ó colocar uma spam e vou colocar tudo completas E aí ele vai tá falso falso falso true é false beleza show de bola aí o que que a gente pode fazer vamos supor que eu só quero exibir a estudos que não foram completados ou seja essa te dou aqui nesse caso é como é que eu posso fazer eu posso criar filtros

E aí utiliza ar comprimido E aí Vou colocar aqui ó an ample letras tudo nem sei se a palavra Existe algum completa mas sem entendeu tudo isso que não estão completas aí eu retorno de estudos para poder puxar aqui do lado da tá certo aqui eu vou puxar todos assistidos eu vou até alterar esse cara aqui porque eu acho dos é uma rede aqui eu estou retornando aqui tudo então vai ser a própria T2 aqui a própria Então vai mudar nada a continuar a mesma coisa aqui só que agora eu posso utilizar o filtro já

descrito JavaScript se eu tô aí vai ser tudo o Opa eu dou eu dou se isso completa de Como é o nome completo de apenas completas ou seja Tô fazendo um filtro aqui dizendo me retorne as dois completados mas eu quero ao contrário as não completados então eu vou negar que eu me retorne a estudos que não estão completas se eu salvar aqui olha o que vai acontecer só vai aparecer as falsas e show de bola aí eu posso colocar aqui ó 12 em aberto colocar o H2 Sé em aberto Essa é a 2 e

2 completas aí posso fazer o mesmo louco só que agora eu vou criar outra competia Chamada completa de Jesus mesma coisa vamos lá preta de tudo isso ou seja a estudos que foram completares Vou retornar disso dois filtro te dou eu dou completas ou seja agora só as todas as regras completas E aí e vai ser só um show de bola aí para a gente fechar com chave de ouro você entendeu aqui como é que funciona a a completa a gente tá computando o valor final que depende de outro valor seja esse valor final aqui

depende do valor da haste do se esse daqui depende do valor gasto dois e esse daqui depender Um Curso em Milagres E aí agora a gente vai misturar as coisas como esse daqui é Tá em aberto a gente já sabe eu não preciso imprimir isso daqui tá certo e essa daqui a gente sabe que tá já finalizada a gente pode fazer o seguinte pode é ainda fazer o seguinte retirar isso daqui em todas as estudos há 27 aí aqui vai ser tudo isso normal ó e aqui eu vou fazer o seguinte eu vou colocar input

Olha lá já com box e velho vai ser é tudo onde completas pretas ou complete complete S aqui vai ser o país ou seja tô dizendo aqui que esse incuti vai ser checado ou não olha só e o pa Não funcionou porque é na verdade é v-model né o meu móvel moda você já aprendeu isso checkbox agora sim Xbox então você pode criar uma lista de títulos né completas aqui eu já misturei assunto mas me empolguei Mas é bom te traz mais coisa para você você pode estar todos assistidos isso e passar o vem Model

aqui e aí no futuro a gente vai brincar com esta dor de marcar ela completar ou não e você já vê a reatividade Funcionando aqui ó se altera o valor da tudo que está completada aqui ó ela já cai já cai é no finalizado ou seja não tenho ninguém finalizado Olha só beleza porque a galera tá utilizando o v-model leve modo não se lembra two way data binding dos dois lados é um puxa todas as minhas de dois aqui beleza aí essa daqui eu vou marcar como finalizado Você já foi completada então quando eu alterar

esse valor daqui tudo completude ele vai alterar o valor do vestido né o João registro esse daqui que é falso vai virar acho certo quando eu apertar lá esse botãozinho aqui dessa checkbox E aí o que se esse cara aqui foi alterado né se esse objeto a que se arreio a verdade a rei foi alterado ele vai recompor tá esses dois caras porque esses dois caras dependem desse de cara aqui ou seja ele tem essa dependências Independência eu vou repetir isso toda hora porque ainda vai ter gente não perguntando aí nos comentários então sim ele

depende assim que eu apertar aqui eu volto era o valor dessa para tu beleza aí ele ficou completados caiu aqui automaticamente certo e aí eu posso brincar aqui ó o show de bola cara show de bola isso aqui não tava nem esperando fui fazendo na empolgação empolgação empolgação a e caiu e o exemplo ficou muito massa tá certo espero que tenha ficado super claro para você porque esse daqui de suma importância e na verdade o nosso projetinho aqui final a gente vai envolver Essa questão aí de tudo de marcar como lida como não lida obviamente

vai fazer algo muito mais moderno e muito mais interessante do que esse simples exemplo aqui mas só isso daqui você com certeza já deu para imaginar o poder do vídeo ei s e o que que você pode fazer no seu projeto não é para ficar todo dinâmico Meu jovem tá certo mas sendo assim tem dúvida deixa aqui nos comentários abaixo ou vai lá no Instagram e manda uma mensagem no privado Tá certo de outro modo o meu jovem eu te espero aí na próxima aula fui um [Música] E aí [Música]