[Aula 3 de conhecimento Vue3] Sintaxe do modelo, instruções Vue3

1. Sintaxe do modelo

A expressão de interpolação { { data }} pode ser usada para renderizar dados fornecidos em Vue.

Plataforma de gerenciamento digital
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
sistema de permissão-shopping
endereço de blog pessoal

<script setup>
    import {ref} from "vue"
    const message = ref("Hello Vue3!!")
    const num = ref(10)
</script>
<template>
  <div class="message">{
   
   {message}} ~ {
   
   {num + 10}}</div>
  <div>{
   
   { ok ? 'YES' : 'NO' }}</div>
  <div>{
   
   { message.split('').reverse().join('') }}</div>
</template>
<style lang="scss" scoped>
.message {
  color: red;
  font-weight: bold;
  font-family: "楷体","MicroSoft Yahei";
}
</style>

Nota: A interpolação em vue fornece um ambiente js real, para que possamos usar expressões JS diretamente

2. Instruções básicas

2.1 Visão geral

qual é a instrução

Uma diretiva é um atributo personalizado. Todas as diretivas no Vue começam com v-
{ {}} Problema de oscilação da página de renderização de expressão de interpolação

Quando o código é carregado, o HTML é carregado primeiro e a sintaxe de interpolação é carregada na página como conteúdo HTML.Depois que js é carregado, a sintaxe de interpolação é substituída, então veremos o problema de oscilação.

A diretiva v-cloak resolve o problema oscilante da sintaxe de interpolação

Princípio: ocultar primeiro, substituir o valor e depois exibir o valor final

//CSS中提供样式设置
[v-cloak] {
	display: none;
}

//在插值表达式标签中添加v-cloak指令
<div id="app" v-cloak>{
     
     { title }} === {
     
     { num + 10 }}</div>

2.2 Instruções básicas

v-text atualiza o conteúdo de texto de um elemento

v-textFunciona definindo a propriedade textContent do elemento para substituir qualquer conteúdo existente no elemento. Se você quiser substituir partes especificadas do conteúdo, use expressões de interpolação ( mustache interpolations ).
```
<span v-text="msg"></span>

<span>{
     
     {msg}}</span>
```
v-html atualiza o innerHTML do elemento

v-htmlO conteúdo é inserido diretamente como HTML comum - a sintaxe do modelo Vue não será analisada. Se você estiver v-htmlescrevendo modelos usando , repense como usar componentes.
```
<p>Using text interpolation: {
     
     { rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
```
A renderização dinâmica de HTML arbitrário em seu site é muito perigosa, pois pode facilmente levar a ataques XSS . Use interpolação HTML apenas para conteúdo confiável e nunca para interpolação de conteúdo fornecido pelo usuário.
v-once renderiza elementos e componentes apenas uma vez e ignora atualizações subsequentes

Execute a interpolação única (quando os dados mudam, o conteúdo da interpolação não continuará a ser atualizado)

Cenário de aplicação: As informações exibidas não precisam ser modificadas posteriormente. Você pode usar o comando v-once para melhorar o desempenho.
```

<span v-once>This will never change: {
     
     {msg}}</span>

<div v-once>
  <h1>comment</h1>
  <p>{
     
     {msg}}</p>
</div>

<MyComponent v-once :comment="msg" />

<ul>
  <li v-for="i in list" v-once>{
     
     {i}}</li>
</ul>
```
v-pre pula a compilação deste elemento e de todos os seus filhos

element v-pre, toda a sintaxe do modelo Vue será preservada e renderizada como está. O caso de uso mais comum é exibir a tag e o conteúdo originais das chaves duplas.
```
<span v-pre>{
     
     { this will not be compiled }}</span>
```

- tipo de valor de ligação esperado do v-memo (entenda)

Novas instruções são adicionadas na versão Vue3.2. Tipo de valor vinculado esperado:any[]

Armazene em cache uma subárvore de um modelo. Disponível em elementos e componentes. Para implementar o cache, esta instrução precisa passar uma matriz de comprimento fixo de valores de dependência para comparação. Se cada valor na matriz for igual à última renderização, a atualização de toda a subárvore será ignorada.

<div v-memo="[valueA, valueB]">
  ...
</div>

Quando o componente for renderizado novamente, se valueAe valueBpermanecer inalterado, todas as atualizações deste e de seus filhos serão ignoradas. Na verdade, até mesmo a criação do vnode do DOM virtual será ignorada porque a cópia em cache da subárvore pode ser reutilizada.

É importante especificar a matriz de cache corretamente, caso contrário, as atualizações que deveriam entrar em vigor poderão ser ignoradas. v-memoPassar uma matriz de dependência vazia ( v-memo="[]") terá v-onceo mesmo efeito.

** v-memoSomente para pequenas otimizações em cenários críticos de desempenho, raramente deve ser necessário. **O caso mais comum pode ser útil na renderização v-forde listas enormes (comprimentos superiores a 1000):

<div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
  <p>ID: {
   
   { item.id }} - selected: {
   
   { item.id === selected }}</p>
  <p>...more child nodes</p>
</div>

Quando selectedo estado de um componente muda, um grande número de vnodes será recriado por padrão, embora a maioria deles seja exatamente igual a antes. v-memoUsado aqui, diz essencialmente "só precisa ser atualizado quando o status selecionado do item for alterado". Isso permite que cada item cujo status de seleção não tenha sido alterado reutilize completamente o vnode anterior e pule a comparação de diferenças. Observe que o array de dependência do memo não precisa ser incluído aqui , porque o Vue também julgará item.idcom base no item .:key

Quando v-forusados juntos v-memo, certifique-se de que ambos estejam vinculados ao mesmo elemento. v-memoNão pode ser usado v-forinternamente.

v-memoTambém pode ser usado para evitar manualmente atualizações indesejadas em subcomponentes em alguns casos marginais onde a otimização padrão falha. Mas, novamente, é responsabilidade do desenvolvedor especificar a matriz de dependência correta para evitar pular as atualizações necessárias.

<script setup>
	const arr = [1,2,3]
</script>
<template>
	// 这里 v-memo 条件成立的话跳过更新
	<div v-for="item in arr" v-memo="[item == 2]"></div>
</template>