Vue Learning parle des principes de compilation de modèles

Qu'est-ce que la compilation de modèles ? L'article suivant parlera de la compilation de modèles dans Vue et discutera des principes de compilation de modèles. J'espère qu'il vous sera utile !

vue fournit une syntaxe de modèle qui nous permet de décrire de manière déclarative la relation de liaison entre l'état et le DOM, telle que <p>{{name}}</p> <p></p>. <p>{{name}}</p> <p></p>。

模板编译指的是模板将编译成render函数的过程，渲染函数的作用是每次执行时，会根据最新状态生成新的vnode。

编译的过程是：模板作为输入 -> 模板编译 阶段->生成 渲染函数

面试题

• vue的模板编译？
• 模板编译Compiler中render讲解？
• vue 模板编译的过程，每一个过程细说一下做了些什么
• 模板编译，谁去解析AST树 【相关推荐：vuejs视频教程、web前端开发】

将模板编译成渲染函数

• 解析器：将模板解析为AST(Abstract Syntax Tree 抽象语法树)
• 优化器：遍历AST标记静态节点,因为静态节点不可变，不需要为打上标签的静态节点创建新的虚拟节点，直接克隆已有的虚拟节点。
• 代码生成器：使用AST生成渲染函数。将AST转换成代码字符串。将代码字符串放入渲染函数中，导出被外界使用。

案例

1.模板确认

假设如下代码,有el、template、render、$mount

//复杂案例
let vue = new Vue({
    el: '#app',
    data() {
        return {
            a: 1,
            b: [1]
        }
    },
    render(h) {
        return h('div', { id: 'hhh' }, 'hello')
    },
    template: `<div id=&#39;hhh&#39; style="aa:1;bb:2"><a>{{xxx}}{{ccc}}</a></div>`
}).$mount(&#39;#app&#39;)

console.log(vue)

//脚手架创建的案例
let vue = new Vue({
  render: h => h(App)
}).$mount(&#39;#app&#39;)

1）渲染到哪个根节点上：判断有无el属性，有的话直接获取el根节点，没有的话调用$mount时去获取根节点

2）渲染哪个模板到根节点上去：是否调用render 函数传入了模板 render: h => h(App) -> <app></app>

• 有render：这时候优先执行render函数，render优先级 > template
• 无render：
  • 有template：template解析成render函数的所需格式-代码字符串，并使用调用render函数渲染
  • 无template：el根节点的outerHTML解析成render函数的所需格式-代码字符串，并使用调用render函数渲染
    3.渲染的方式：无论什么情况，最后都统一是要使用render函数渲染

2.解析器-将模板解析成AST

解析器-将模板解析成AST

<div>
  <p>{{name}}</p>
</div>

将上述模板解析成AST后,AST抽象语法树就是使用JS中的对象来描述一个节点，一个对象表示一个节点。

{
  tag: "div"
  type: 1, //节点类型
  staticRoot: false,
  static: false,
  plain: true,
  parent: undefined, //存放父节点
  attrsList: [],
  attrsMap: {},
  children: [ //存放孩子节点
      {
      tag: "p"
      type: 1,
      staticRoot: false,
      static: false,
      plain: true,
      parent: {tag: "div", ...},
      attrsList: [],
      attrsMap: {},
      children: [{
          type: 2,
          text: "{{name}}",
          static: false,
          expression: "_s(name)"
      }]
    }
  ]
}

解析器的工作原理

解析器的原理的是一小段一小段地截取模板字符串，每截取一小段字符串，就会根据截取出来的字符串类型触发不同的钩子函数，直到模板字符串截空停止。然后使用栈来确定层级关系

解析器内部分也分几个子解析器，如HTML解析器、文本解析器等。

HTML解析器的作用是解析HTML，在解析HTML的过程中不断触发各种钩子函数，

• 开始标签的钩子函数中可以构建元素类型的节点
• 文本钩子函数中可以构建文本类型的节点
• 注释钩子函数中可以构建注释类型的节点
• 结束标签钩子函数

文本解析器是对HTML解析出来的文本进行二次加工，比如插值语法{{}}

如何确定DOM之间的层级关系？使用栈
在触发开始标签的钩子函数时，如果当前标签不是自闭合标签，就push进stack。
在触发结束标签的钩子函数时，就从栈中pop

La compilation de modèles fait référence au processus de compilation du modèle dans une fonction de rendu. La fonction de la fonction de rendu est de générer un nouveau vnode basé sur le dernier statut à chaque fois qu'il est exécuté. Le processus de compilation est : Modèle en entrée-> Étape de compilation du modèle->Générer une fonction de rendu

Questions d'entretien

• Compilation de modèles de vues ?
• Explication du rendu dans la compilation de modèles Compilateur ?
• Le processus de compilation du modèle de vue, décrivez en détail ce qui est fait dans chaque processus
• Compilation du modèle, qui analysera l'arborescence AST [Recommandations associées : tutoriel vidéo vuejs🎜, Développement front-end Web🎜】

🎜🎜🎜Compilez le modèle dans une fonction de rendu🎜🎜🎜🎜

• Analyseur : analysez le modèle dans AST (Abstract Syntax Tree)
• Optimiseur : parcourez l'AST pour marquer les nœuds statiques, car les nœuds statiques sont immuables et n'ont pas besoin de le faire. être marqué. Étiquetez les nœuds statiques pour créer de nouveaux nœuds virtuels et cloner directement les nœuds virtuels existants.
• Générateur de code : utilisez AST pour générer des fonctions de rendu. Convertissez AST en chaîne de code. Mettez la chaîne de code dans la fonction de rendu et exportez-la pour qu'elle puisse être utilisée par le monde extérieur.

🎜🎜Cas🎜

🎜🎜🎜🎜🎜1. Confirmation du modèle 🎜🎜🎜 Supposons que le code suivant ait el code>, <code>modèle, render, $mount🎜

<div>
  <p>{{name}}</p>
</div>
//生成的render渲染函数
{
  render: `with(this){return _c('div',[_c('p',[_v(_s(name))])])}`
}
//格式化后
with(this){
  return _c(
    'div',
    [
      _c(
        'p',
        [
          _v(_s(name))
        ]
      )
    ]
  )
}

🎜🎜🎜🎜1) Vers quel nœud racine rendre🎜 : Déterminez s'il existe un attribut el, et si oui, obtenez le el directement le nœud racine, sinon, obtenez le nœud racine lors de l'appel de $mount🎜🎜🎜2) Quel modèle rendre au nœud racine🎜 : s'il faut appeler la fonction render et transmettre le modèle render : h =&gt ; h(App) -> <app></app>🎜

• Avec render : À ce stade, la fonction de rendu est exécutée en premier, 🎜priorité de rendu> modèle🎜
• Pas de rendu :
  • Avec modèle : le modèle est analysé dans le format requis de la fonction de rendu - une chaîne de code et rendu à l'aide de la fonction de rendu appelée li>
  • Sans modèle : le HTML externe du nœud racine Analysez-le dans le format requis par la fonction de rendu - une chaîne de code et effectuez le rendu à l'aide de la fonction de rendu
    3. Méthode de rendu : quelle que soit la situation, le résultat final L'étape consiste à utiliser la fonction de rendu pour rendre🎜
  ul>

🎜🎜🎜2 Parser - Analyser le modèle dans AST🎜🎜🎜Parser. - Analysez le modèle dans AST🎜rrreee🎜Analysez le modèle ci-dessus dans Après AST, l'arbre de syntaxe abstraite AST utilise des objets dans JS pour décrire un nœud, et un objet représente un nœud. 🎜rrreee

🎜🎜Le principe de fonctionnement de l'analyseur🎜

🎜🎜Le principe de l'analyseur est d'intercepter la chaîne modèle par petites sections, et à chaque fois une petite section de la chaîne est interceptée, différentes fonctions de hook seront déclenchées en fonction du type de chaîne interceptée jusqu'à ce que la chaîne modèle soit tronquée pour s'arrêter. Utilisez ensuite la pile pour déterminer la relation hiérarchique. La partie interne de l'analyseur est également divisée en plusieurs sous-analyseurs, tels que l'analyseur HTML, l'analyseur de texte, etc. 🎜🎜🎜Le rôle de l'analyseur HTML est d'analyser le HTML🎜 Dans le processus d'analyse du HTML, diverses fonctions de hook sont déclenchées en continu 🎜

• La fonction de hook de la balise de début peut construire des nœuds de types d'éléments<.>Les nœuds de type texte peuvent être construits dans la fonction de crochet de texte
• Les nœuds de type commentaire peuvent être construits dans la fonction de crochet de commentaire
• Fonction de crochet de balise de fin

🎜Texte L'analyseur effectue un traitement secondaire sur le texte analysé à partir du HTML Par exemple, la syntaxe d'interpolation {{}}🎜🎜🎜Comment déterminer la relation hiérarchique entre les DOM ? Utiliser stack 🎜
Lors du déclenchement de la fonction hook de la balise de début, si la balise courante n'est pas une balise à fermeture automatique, push entre dans stack.
Lorsque la fonction hook de la balise de fin est déclenchée, pop sera joué à partir de la pile🎜🎜🎜🎜🎜3 Optimiseur - Marquer les nœuds statiques dans l'AST🎜🎜🎜🎜Marquer les nœuds statiques. sous-arbres Les avantages🎜🎜

• 每次重新渲染时，不需要为静态子树创建新虚拟子树，克隆已存在的静态子树
• 在虚拟DOM中打补丁(patching)的过程可以跳过 ，静态子树是不可变的

优化器的内部实现主要分两步用递归的方式将所有节点添加 static 属性，true表示是静态的，false表示不是静态的。

• 在AST中找出所有静态节点并打上标记
  静态节点:DOM不会发生变化的节点
  通过递归的方式从上向下标记静态节点，如果一个节点被标记为静态节点，但它的子节点却被标记为动态节点，就说明该节点不是静态节点，可以将它改为动态节点。静态节点的特征是它的子节点也必须是静态的。

静态根节点也是静态节点

• **在AST中找出所有静态根节点并打上标记 **
  静态根节点:子节点全是静态节点的节点
  使用递归从上向下寻找，在寻找的过程中遇见的第一个静态节点就为静态根节点，同时不继续往下找。

如果一个静态根节点的子节点只有一个文本节点或没有子节点，那么不会标记成静态根节点，即使他们是，因为优化成本大于收益

怎么判断是否静态节点?
在将模板字符串解析成AST的时候，会根据不同的文本类型设置一个 type

type	说明	是否时静态节点
1	元素节点	进行一些排除
2	带遍历的动态文本节点	不是
3	不带遍历的纯文本节点	是

4.代码生成器-将AST转化成渲染函数中的代码字符串

代码生成器的作用:将AST转化成渲染函数中的代码字符串

<div>
  <p>{{name}}</p>
</div>
//生成的render渲染函数
{
  render: `with(this){return _c('div',[_c('p',[_v(_s(name))])])}`
}
//格式化后
with(this){
  return _c(
    'div',
    [
      _c(
        'p',
        [
          _v(_s(name))
        ]
      )
    ]
  )
}

生成代码字符串是一个递归的过程，从顶向下依次处理每一个AST节点。
节点有三种类型，分别对应三种不同的创建方法与别名。

类型	创建方法	别名
元素节点	createElement	_c
文本节点	createTextVNode	_v
注释节点	createEmptyVNode	_e

渲染函数可以生成VNode的原因:渲染函数其实是执行了createElement，而createElement可以创建VNode。

代码字符串的拼接过程

递归AST来生成字符串，最先生成根节点，然后在子节点字符串生成后，将其拼接在根节点的参数中，子节点的子节点拼接在子节点的参数中，一层层拼接。

（学习视频分享：vuejs入门教程、编程基础视频）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!