# A função e os benefícios da chave em v-for
1. Quando a chave não é definida, os nós novos e antigos são comparados um a um quando a visualização muda, e a visualização será atualizada uma vez se eles forem diferentes.
2. No caso de definir a chave, quando diferentes nós forem encontrados, o número e o comprimento dos nós antigos e novos serão comparados, e os diferentes nós serão propostos primeiro para comparar os nós restantes, e separar nós diferentes, adicionando ou excluindo, para reduzir o desnecessário A visualização é atualizada.
Função: É conveniente para o vnode encontrar o nó correspondente no processo diff e reutilizá-lo com sucesso.
Benefícios: pode reduzir o número de atualizações de visualização e melhorar o desempenho.
# O processo de compilação de modelos no Vue
String de modelo -> objeto AST -> Otimizar AST (marcar nó raiz estático) -> código de formulário de string -> nova função -> função anônima (função de renderização)
1 、 compileToFunctions (template, ...)
- Carregue a função de renderização compilada do cache
-Compile (modelo, opções) não é chamado no cache
2 、 compilar (modelo, opções)
- Opções de combinação
3 、 baseCompile (template.trim (), finalOptions)
-parse () converte o modelo em árvore AST
- otimizar ()
- Marcar subárvores estáticas na árvore AST
- A subárvore estática é detectada, definida como estática, sem necessidade de regenerar nós toda vez que você renderizar novamente
- Ignore as subárvores estáticas na fase de patch
-generate () árvore AST gera código de criação js
4 、 compileToFunctions (template, ...)
-Continue a converter o código js da forma de string gerado na etapa anterior em uma função
- createFunction ()
- O render e staticRenderFns são inicializados e montados nas propriedades correspondentes das opções da instância Vue