TESTE DE PERFORMANCE

Análise e Desenvolvimento de Sistemas

Frameworks Front-end e conexão com Back-end
[22E2_4]
Raphael Renato de Souza e Sousa

Profo.: Daniel de Oliveira

09 de maio de 2022
Questão 01

a. Explique com suas palavras o que é o padrão de design utilizado

pelo Vue.js chamado de MVVM (Model-View-ViewModel) e as
diferenças deste para com outros padrões.
O padrão MVVM é baseado no Model-View-Controller, ambos
possuem o Model-View e só se separam devido ao ViewModel.
O padrão MVVM foi desenvolvido para implementar a vinculação de
dados entre o seu ViewModel e a sua View.
b. Exemplifique os objetos de uma aplicação Vue.js que utilize o
padrão MVVM.
View é responsável por mostrar a informação ao usuário, o Controller
tem a finalidade de mediar e transformar os dados e o Model é a Lógica
de Negócio e persistência de dados.

Questão 02

Explique com as suas palavras as diferenças entre o padrão MVC e o MVVM.

No padrão Model View Controller (MVC), o controller aceita as solitações HTTP,

obtém dados a partir do modelo, e encaminha para a view de forma
renderizada.

Já os ViewModels, tem a capacidade de fazer as duas coisas, tanto a parte de

controller quanto a parte de view, ja que o mesmo tem a responsabilidade de
realizar e expor os comandos que abrigam toda a lógica de interface do usuário
e isso incluí a busca dos dados e a os conectar.
Questão 03

O que uma aplicação necessita para ser considerada uma aplicação reativa?

Uma aplicação para ser considerada reativa deve ter uma comparação com
dado valor, se o usuário escolher determinada opção o programa compara e
segue um fluxo determinado caso não, o programa seguirá outro fluxo!

Questão 04

a. Qual diretiva do Vue.js é utilizada para mostrar ou não mostrar um

elemento baseado em uma condição?
A diretiva v-if ao ser aplicada em determinado elmento no HTML, faz
com que ele seja inserido na página somente se uma condição for
atendida. Caso o valor verificado seja falso, o lemento será removido
do documento.
b. Quais outras diretivas podem ser utilizadas para o mesmo propósito
e qual a diferença entre as duas?

Podemos utilizar o v-else-if de forma complementar no caso de

existir mais de uma condição alternativa, nessa situação se utiliza
um bloco else if.

Questão 05

Como mostramos variáveis do Vue.js da propriedade "data" da instância Vue

no nosso template?

O que vamos usar no HTML dentro da instância do Vue, ou seja, dentro do Vue
no arquivo JavaScript é criar um objeto do Vue e iremos retornar ele para ser
usado no template.

Dentro do objeto data, dentro do template, iremos utilizar uma interpolação que
são as chaves – chaves {{}}
Questão 06

a. O que é o DOM Virtual?

Virtual DOM é a representação do DOM mantida em memória pois
quando precisamos fazer alguma alteração, ela é feita no Virtual
DOM sendo bem mais rápida que o DOM.
b. Explique com as suas palavras para que serve o Loop de Eventos
utilizado no ciclo de vida do Vue.js?
O Loop de Eventos é responsável pela a execução do código, coleta
e processamento de eventos e execução de subtarefas enfileiradas.

Questão 07

Para que é utilizada a diretiva v-for?

A diretiva for é usada para renderizar uma lista de elementos com dos dados
inseridos num array.

Questão 08

Mostre um exemplo em código onde podemos utilizar um Filtro Vue.

O Vue permite que você defina filtros que podem ser utilizados para aplicação
de formatação de textos. Os filtros são permitidos em interpolações mustache
e expressões v-bind.

<!-- em interpolações de texto -->

{{ message | capitalize }}

<!-- em interligações de atributos -->

<div v-bind:id="rawId | formatId"></div>

Você pode definir filtros locais nas opções dos componentes:

filters: {

capitalize: function (value) {

if (!value) return ''

value = value.toString()

return value.charAt(0).toUpperCase() + value.slice(1)

Ou definir filtros globalmente antes de criar a instância Vue:

Vue.filter('capitalize', function (value) {

if (!value) return ''

value = value.toString()

return value.charAt(0).toUpperCase() + value.slice(1)

})

new Vue({

// ...

})
Questão 09

Existe uma vulnerabilidade de segurança ao utilizar a diretiva v-html. Qual

seria esta vulnerabilidade?

No v-html, ao se atualizar o innerHTML do elmento, os conteúdos são inseridos

como HTML puro e eles não serão compilados como templates Vue. Devemos
ser vigilantes se pensar-mos em usálos.

Ao se renderizar dinamicamente HTML arbitrário em seu website pode ser

muito perigoso pois isso pode levar a ataques XSS. Só devemos usar v-html
somente em conteúdo confiável e nunca fornecido pelo usuário.

Nos componentes Single-File, estilos scoped não serão aplicados a conteúdos

v-html, pois tal HTML não é processado pelo compilador de templates do Vue.
Se você quer atingir conteúdo v-html com CSS com escopo, você deve usar
utilizar CSS Modules ou um elemento global adicional <sytle>, com uma
estratégia manual de escopo como BEM.

Como exemplo temos:

<div v-html="html"></div>

Questão 10

Crie um novo projeto Web Vue.js com os comandos aprendidos e implemente

as seguintes funcionalidades:

o Crie uma variável do tipo Array com o objeto que será uma tarefa, que vai
possuir as propriedades: id (Number), descricao (String), estaCompleta
(Boolean);
o Preencha esse array com várias tarefas e as propriedades acima;
o Exiba uma lista com essas tarefas exibindo a descrição;
 o Implemente um elemento de interface para a tarefa que possuir a
variável estaCompleta como True. Sugestões de elemento de interface:
Texto sublinhado, Texto riscado, Cor diferente, etc;

Link  https://github.com/RaphaelRenato/JavaScript