vue2模板编译

最新推荐文章于 2024-08-02 17:19:38 发布

就是个名称

最新推荐文章于 2024-08-02 17:19:38 发布

阅读量860

点赞数 1

分类专栏： vue javascript 文章标签： vue.js 前端 javascript 1024程序员节

本文链接：https://blog.csdn.net/weixin_43845059/article/details/127447075

版权

javascript 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

vue

10 篇文章 0 订阅

订阅专栏

我们都了解VNode，那么VNode是怎样生成的那？vue是怎么把我们写的 <template>编译成VNode的那，这里我们就需要了解模板编译，vue会把用户在<template></template>标签中写的类似于原生HTML的内容进行编译，把原生HTML的内容找出来，再把非原生HTML找出来，经过一系列的逻辑处理生成渲染函数，也就是函数，而render函数会将模板内容生成对应的VNode，而VNode再经过前几篇文章介绍的patch过程从而得到将要渲染的视图中的VNode，最后根据VNode创建真实的DOM节点并插入到视图中，最终完成视图的渲染更新。

整体渲染流程

抽象语法树AST

用户在<template></template>标签中写的模板对Vue来说就是一堆字符串，那么如何解析这一堆字符串并且从中提取出元素的标签、属性、变量插值等有效信息呢？这就需要借助一个叫做抽象语法树的东西。

ast = {
    'type': 1,
    'tag': 'div',
    'attrsList': [
        {
            'name':'id',
            'value':'NLRX',
        }
    ],
    'attrsMap': {
      'id': 'NLRX',
    },
    'static':false,
    'parent': undefined,
    'plain': false,
    'children': [{
      'type': 1,
      'tag': 'p',
      'plain': false,
      'static':false,
      'children': [
        {
            'type': 2,
            'expression': '"Hello "+_s(name)',
            'text': 'Hello {{name}}',
            'static':false,
        }
      ]
    }]
  }

将一堆字符串模板解析成抽象语法树AST后，我们就可以对其进行各种操作处理了，处理完后用处理后的AST来生成render函数。其具体流程可大致分为三个阶段：