[Introdução ao Vue] Ligação bidirecional de dados MVVM e o ciclo de vida do Vue

Índice

1. Introdução ao Vue

1.1 O que é Vue?

1.2 Vantagens do Vue

1.3 A diferença entre bibliotecas e frameworks

2. Primeiros passos com Vue

2.1 MVVM (ligação de dados bidirecional)

2.2 BootCDN (serviço de aceleração)

3. Instância Vue

3.1 Exemplo de desenvolvimento Vue

3.2 Vinculação de dados bidirecional

3.3 Ganchos do ciclo de vida Vue

1. Introdução ao Vue

1.1 O que é Vue?

Vue é uma estrutura JavaScript progressiva para construção de interfaces de usuário. "Progressivo" significa que o Vue foi projetado para aprimorar gradualmente a funcionalidade e a complexidade do aplicativo, em vez de introduzir todos os recursos de uma vez. Isso permite que os desenvolvedores usem seletivamente diferentes recursos e funções do Vue de acordo com as necessidades do projeto.

1.2 Vantagens do Vue

Vue tem muitas vantagens práticas, aqui estão algumas delas:

Fácil de aprender e usar: Vue possui uma API simples e intuitiva e documentação clara, permitindo que iniciantes comecem rapidamente. Sua sintaxe e conceitos são muito semelhantes aos tradicionais HTML, CSS e JavaScript, reduzindo a curva de aprendizado.
Desenvolvimento progressivo: os recursos progressivos do Vue permitem que os desenvolvedores usem seletivamente diferentes recursos e funções do Vue de acordo com as necessidades do projeto. Essa flexibilidade torna o Vue adequado para projetos de todos os tamanhos e complexidades.
Vinculação de dados responsiva: O mecanismo de vinculação de dados responsivo do Vue mantém os dados e visualizações sincronizados.Quando os dados mudam, os elementos DOM relacionados são atualizados automaticamente. Isso simplifica o processo de desenvolvimento e reduz a carga de trabalho de manipulação manual do DOM.
Desenvolvimento baseado em componentes: Vue incentiva os desenvolvedores a dividir os aplicativos em vários componentes reutilizáveis, cada um com seu próprio modelo, lógica e estilo. O desenvolvimento baseado em componentes melhora a capacidade de manutenção e reutilização do código e também torna a colaboração em equipe mais eficiente.
DOM virtual e alto desempenho: Vue usa DOM virtual para melhorar o desempenho. Ao comparar as diferenças no DOM virtual, o Vue atualiza apenas as partes que precisam ser atualizadas, reduzindo as operações no DOM real e melhorando o desempenho. Além disso, o Vue também possui estratégias de otimização, como renderização assíncrona e carregamento lento em nível de componente, o que melhora ainda mais o desempenho do aplicativo.
Suporte a ecossistema e plug-ins: Vue tem um enorme ecossistema com muitas bibliotecas e plug-ins de terceiros para você escolher. Essas bibliotecas e plug-ins podem ajudar os desenvolvedores a resolver vários problemas e melhorar a eficiência do desenvolvimento.

Vue tem as vantagens de ser fácil de aprender e usar, grande flexibilidade, desempenho superior e alta capacidade de manutenção, tornando-o a escolha ideal para a construção de aplicações web modernas. Como engenheiro de software, costumo usar o Vue para desenvolver aplicativos front-end e continuo aprendendo e explorando as mais recentes tecnologias e práticas recomendadas do Vue para fornecer interfaces de usuário de alta qualidade.

1.3 A diferença entre bibliotecas e frameworks

Biblioteca: como: (a mais típica em js é jQuery)
- Uma biblioteca é uma coleção de código reutilizável que resolve um problema específico ou fornece funcionalidade específica. Geralmente contém uma série de funções, classes, métodos ou ferramentas, e os desenvolvedores podem usar seletivamente as funções da biblioteca de acordo com suas necessidades.
- A maneira de usar a biblioteca é chamá-la ativamente. Os desenvolvedores introduzem a biblioteca em seu próprio código e chamam as funções ou métodos da biblioteca conforme necessário para concluir tarefas específicas.
- As bibliotecas geralmente têm um tamanho pequeno e fornecem apenas funções específicas.Os desenvolvedores podem escolher a biblioteca apropriada para construir aplicativos de acordo com suas próprias necessidades.
Estrutura:
- Um framework é a base de uma arquitetura de software que fornece um conjunto de soluções e ferramentas para o desenvolvimento de tipos específicos de aplicações. Ele define a estrutura, as especificações e o fluxo de trabalho da aplicação, e os desenvolvedores precisam desenvolver de acordo com as regras do framework.
- A forma como a estrutura é usada é chamá-la passivamente: os desenvolvedores escrevem o código do aplicativo e o incorporam na estrutura, e a estrutura controla o processo de execução do aplicativo.
- Frameworks geralmente têm um grande volume e fornecem um ambiente de desenvolvimento completo e uma série de módulos funcionais.Os desenvolvedores podem desenvolver rapidamente com base no framework e reduzir o trabalho repetitivo.

2. Primeiros passos com Vue

2.1 MVVM (ligação de dados bidirecional)

Antes de utilizá-lo, vamos primeiro entender o que é MVVM? , simplesmente falando, é uma solução melhor no modo UI. O MVVM pode sincronizar automaticamente os dados em ambas as direções por meio da ligação de dados bidirecional.

MVVM	MV-VM
M	modelomodelo de dados
V	visualizar
VM	ViewModel O modelo de visualização, que associa Model e view, é ViewModel.ViewModel é responsável por sincronizar os dados do Model com o View para exibição, e também é responsável por sincronizar as modificações do View de volta ao Model.

1) V (modificar dados) -> M envia os dados da camada de visualização para o servidor back-end (front-end para back-end) através de eventos
$('#btn_login').click(function(){Enviar o dados na página através de ajax Os dados são passados para o servidor backend em formato json });

2) M (modificar dados) -> V Exibir os dados de back-end (JSON) na camada de visualização por meio de atribuição (back-end para front-end)
Chame a interface de dados de back-end por meio de ajax para renderizar os dados JSON retornados para a página
$('#book_name').val("xxx");

Comparado ao padrão MVC, o modelo MVVM é um padrão arquitetônico mais moderno e introduz um novo componente baseado no padrão MVC: o modelo de visualização (ViewModel). O padrão MVVM divide a aplicação em quatro componentes principais: Model, View, ViewModel e Data Binding. O modelo é responsável pelo processamento de dados e lógica de negócio, a visão é responsável por exibir a interface do usuário, e o modelo de visão atua como intermediário entre o modelo e a visão, responsável por processar o estado e o comportamento da visão. O mecanismo de vinculação de dados torna a sincronização de dados entre visualizações e modelos de visualização mais simples e automatizada. A vantagem do padrão MVVM é que ele separa as visualizações e a lógica de negócios, tornando o código mais fácil de manter e testar, e fornece uma melhor experiência de interação da interface do usuário por meio do mecanismo de vinculação de dados.

2.2 BootCDN (serviço de aceleração)

Site oficial: BootCDN - Bootstrap Site chinês projeto de código aberto serviço de aceleração de CDN gratuito

O nome completo da CDN é Content Delivery Network, que é uma rede de distribuição de conteúdo. CDN é uma rede de distribuição de conteúdo construída na rede. Ela depende de servidores de borda implantados em vários locais e permite que os usuários usem balanceamento de carga, distribuição de conteúdo, agendamento e outros módulos funcionais da plataforma central. Obtenha o conteúdo necessário nas proximidades, reduza o congestionamento da rede e melhore a velocidade de resposta de acesso do usuário e a taxa de acerto.

As principais tecnologias do CDN incluem principalmente tecnologia de armazenamento e distribuição de conteúdo.
A aceleração CDN acelera principalmente recursos estáticos, como imagens e mídia carregadas no site, bem como alguns JS, CSS e outros arquivos importados.
A aceleração CDN depende de vários nós de rede. Por exemplo, 100 servidores CDN estão distribuídos em todo o país. Quando acessados de Xangai, os recursos serão retornados do nó mais próximo. Este é o núcleo.
O servidor CDN realiza a reserva de recursos armazenando em cache ou rastreando ativamente o conteúdo do servidor principal.
O princípio básico do CDN: distribuir o conteúdo do site de origem para o nó mais próximo do usuário, para que o usuário possa obter o conteúdo necessário nas proximidades e melhorar a velocidade de resposta e a taxa de sucesso do acesso do usuário.
O CDN é implantado na sala de informática do provedor de rede. Quando os usuários solicitam serviços de rede, eles podem obter dados da sala de informática do provedor de rede mais próximo.

A maior vantagem é que permite aos usuários acessar recursos próximos, para que não seja necessário baixar as ferramentas ou bibliotecas necessárias, o que facilita o desenvolvimento e reduz os recursos do projeto.

Desvantagens de usar CDN:
Depois de falar das vantagens, devemos falar também das desvantagens, para sites que não usam CDN, se ele entrar em colapso, ficarei parado. Para um pequeno número de sites que dependem de CDN para recursos, isso pode afetar apenas a experiência, como exibição de página, eventos js, etc., mas para sites que dependem fortemente de CDN, só se pode dizer que todos morrerão junto. . .

3. Instância Vue

3.1 Exemplo de desenvolvimento Vue

Vue tem dois métodos de desenvolvimento, um é o desenvolvimento direto de página e o outro é o desenvolvimento em nível de engenharia. Este exemplo usa o método de desenvolvimento direto de página.

Observação:

1. Cada aplicação Vue começa criando uma nova instância Vue usando o construtor Vue.
2. Você precisa especificar uma área de gerenciamento de conteúdo para o Vue. Normalmente também a chamamos de limite, o que significa que todas as nossas alterações subsequentes estarão dentro do div especificado e a parte externa do div será inútil.
3. Chaves duplas são chamadas de interpolação

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue入门</title>
		<!-- 1. 导入工具 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	</head>
	<body>
		<!-- 2. 定义vue所管理的边界，有且只有一个根节点 -->
		<div id="xw">
			<h1>{
   
   {msg}}</h1>
		</div>
	<script type="text/javascript">
		/* 3. 构建vue实例并绑定边界 */
		new Vue({
			el:"#xw",
			data(){
				return{
					msg:'hello 小威',
				}
			}
		})
	</script>
	</body>
</html>

3.2 Vinculação de dados bidirecional

Diretiva vue: refere-se a atributos especiais com o prefixo "v-"

Os métodos da instância vue são usados para definir as funções usadas pelos eventos interativos. Não há restrição quanto ao nome da função.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue入门</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	</head>
	<body>
		<div id="xw">
			<h1>{
   
   {msg}}</h1>
			<p>
				<input v-model="msg" />
                <!-- v-on:（也可以用@替代） -->
				<button v-on:click="getMsg">获取输入框内容</button>
			</p>
		</div>
		<script type="text/javascript">
			new Vue({
				el: "#xw",
				data() {
					return {
						msg: '123',
					}
				},
				methods: {
					getMsg() {
						alert(this.msg);
					}
				}
			})
		</script>
	</body>
</html>

Observação:

Alterações nos dados causarão alterações no DOM, e alterações no DOM também causarão alterações nos dados.

Somente as propriedades presentes nos dados quando a instância é criada são reativas

Crie ligação de dados bidirecional em elementos de controle de formulário usando a diretiva v-model

isso aponta para a instância atual do Vue no atributo de métodos método

O objeto console pode usar espaços reservados no estilo printf. Suporta apenas quatro tipos: caracteres (%s), inteiros (%d ou%i), números de ponto flutuante (%f) e objetos (%o)

As instâncias Vue também expõem algumas propriedades e métodos úteis de instância. Todos eles são prefixados com $ para distingui-los das propriedades definidas pelo usuário

3.3 Ganchos do ciclo de vida Vue

Os ganchos do ciclo de vida do Vue são funções de retorno de chamada executadas em diferentes estágios da instância do Vue. Essas funções de gancho nos permitem executar lógica personalizada em estágios específicos do ciclo de vida para operações de inicialização, atualização e destruição em diferentes estágios do aplicativo.

A seguir está a função de gancho do ciclo de vida do Vue:

beforeCreate: Chamado antes da criação da instância, quando a observação dos dados e a configuração do evento ainda não foram concluídas.
criado: chamado após a criação da instância. Neste momento, a observação dos dados foi concluída, mas ainda não foi montada no DOM.
beforeMount: chamado antes da instância ser montada no DOM.
montado: chamado após a instância ser montada no DOM. Neste momento, os elementos do DOM podem ser acessados.
beforeUpdate: Chamado antes que os dados sejam atualizados, antes que o DOM virtual seja renderizado novamente e corrigido.
atualizado: chamado após a atualização dos dados, o que ocorre após o DOM virtual ser renderizado novamente e corrigido.
beforeDestroy: Chamado antes da instância ser destruída, quando a instância ainda está totalmente disponível.
destruído: Chamado após a destruição da instância. Neste momento, a instância foi destruída e todos os ouvintes de eventos e subinstâncias foram removidos.

Além dessas funções de gancho de ciclo de vida comumente usadas, o Vue também fornece algumas outras funções de gancho, como ativada e desativada, para lidar com a ativação e desativação de componentes keep-alive.

Exemplo: