Este artigo é apenas para que todos entendam o princípio, o código escrito não é o código-fonte do Vue
<div id="app">
<h1> {
{
name }} </h1>
<p> {
{
mes }} </p>
</div>
console.log(app) // 打印出来看一下
new Vue({
el:'#app',
data:{
name:'刘亦菲',
mes:'我爱你'
}
})
console.log(app) // 在这里打印出来看一下
- Pode-se ver que embora ambos sejam aplicativos, o conteúdo que aparece nos dois divs diferentes é diferente, e o último é renderizado na página. Quando o mouse é colocado sobre ele, a página tem uma resposta de destaque
- Então, como o Vue renderiza o nome e mes nos dados da instância para a página?
Quatro etapas
- Encontre a etiqueta
- Obter dados
- Encontre chaves duplas e substitua-as
- Renderizar
Encontre a etiqueta
Recrie uma nova página e exclua o arquivo Vue importado
let tempNode = document.querySelector('#app')
Obter dados
let data = {
name:'刘亦菲',
mes:'我爱你'
}
Encontre chaves duplas, combine dados com modelo
- Primeiro encontre todos os elementos filhos do modelo
- A recursão é geralmente usada
- No código-fonte real do Vue é JULGAMENTO->Modelo de string->VNode->DOM real
function compiler(template,data) {
let chileNodes = template.childeNode // 拿到所有子节点
}
- Sabemos que os nós DOM correspondem a valores diferentes e representam nós diferentes
- Vamos percorrer todos os nós filhos. Quando este nó é um nó de elemento, precisamos recursar, porque pode ser um rótulo aninhado
- Considere se ele possui subelementos e se precisa ser interpolado.
function compiler(template,data) {
let chileNodes = template.childNodes
for(let i = 0; i < childNodes.length; i++) {
let type = childNodes[i].nodeType
if(type === 3){
// 文本节点
} else if(type === 1) {
// 元素节点
compiler(childNodes[i],data)
}
}
}
- Quando este nó é um nó de texto, isso significa que pode haver colchetes que precisamos
// 使用正则来选择
let reg = /\{\{(.+?)\}\}/g;
if(type === 3){
let txt = childNodes[i].nodeValue // 该属性只有文本节点才有意义
txt = txt.replace(reg,function(_,g) {
let key = g.trim(); // 剔除掉不必要的东西
let value = data[key] // 把保存在data里的对应的数据赋值给选出来的值
return value // 返回被data赋值后的新的值
})
childNodes[i].nodeValue = txt
}
- Você pode não estar familiarizado com o uso de substituir, vamos dar uma olhada
- A correspondência é o primeiro parâmetro da função
- O valor de retorno da função é usado para substituir o que é correspondido
- O primeiro parâmetro e os parâmetros subsequentes da função são os grupos correspondentes na expressão regular
Renderize os dados para a página
-
No momento, nenhum novo modelo é gerado, então o que você vê aqui são os dados que são atualizados diretamente na página, porque DOM é um tipo de referência
-
O modelo irá embora
-
Não mudaremos o modelo diretamente, então clone
let generateNode = tempNode.cloneNode(true)
console.log(tempNode)
// compiler(tempNode,data)
compiler(generateNode,data)
console.log(tempNode)
app.parentNode.replaceChild(generateNode,app)
- Observe o efeito de imprimir na página
Dê uma olhada no código completo
<body>
<div id="app">
<h1> {
{
name }} </h1>
<p> {
{
mes }} </p>
</div>
// js部分
<script>
let tempNode = document.querySelector('#app')
let data = {
name:'刘亦菲',
mes:'我爱你'
}
let reg = /\{\{(.+?)\}\}/g;
function compiler(template,data) {
let childNodes = template.childNodes
for(let i = 0; i < childNodes.length; i++) {
let type = childNodes[i].nodeType
if(type === 3) {
let txt = childNodes[i].nodeValue
txt = txt.replace(reg,function(_,g) {
let key = g.trim();
let value = data[key]
return value
})
childNodes[i].nodeValue = txt
} else if(type === 1) {
compiler(childNodes[i],data)
}
}
}
let generateNode = tempNode.cloneNode(true)
console.log(tempNode)
// compiler(tempNode,data)
compiler(generateNode,data)
console.log(tempNode)
app.parentNode.replaceChild(generateNode,app)
</script>
</body>