当前位置: 首页 > news >正文

vuejs源码阅读之代码生成器

代码生成器是模版编译的最后以后,它的作用是将AST转换成渲染函数中的内容,这个内容可以称为代码字符串。

代码字符串可以被包装在函数中执行,这个函数就是我们通常说的渲染函数。

渲染函数被执行之后,可以生成一份VNode,而虚拟DOM可以通过这个VNode来渲染视图。

AST生成代码字符串

比如下面这个代码。

<div id="el">hello {{name}}
</div>

它转换成AST并且经过优化器的优化之后是下面这个样子。

{"type": 1,"tag": "div","attrsList": [{"name": "id","value": "el","start": 5,"end": 12}],"attrsMap": {"id": "el"},"rawAttrsMap": {"id": {"name": "id","value": "el","start": 5,"end": 12}},"children": [{"type": 2,"expression": "\"\\n        hello \"+_s(name)+\"\\n    \"","tokens": ["\n        hello ",{"@binding": "name"},"\n    "],"text": "\n        hello {{name}}\n    ","start": 13,"end": 41,"static": false}],"start": 0,"end": 47,"plain": false,"attrs": [{"name": "id","value": "\"el\"","start": 5,"end": 12}],"static": false,"staticRoot": false
}

代码生成器可以通过上面这个AST来生成代码字符串,生成后的代码字符串。

with (this) {return _c('div',{ attrs: { "id": "el" } },[_v("\n        hello " + _s(name) + "\n    ")])
}

仔细观察生成后的代码字符串,这是一个嵌套的函数调用。函数_c的参数中执行了函数_v,而_v的参数中又执行了_s。

这个字符串中_c其实是createElement的别名。createElement是虚拟DOM中所提供的方法,它的作用是创建虚拟节点,有三个参数,分别是:

  • 标签名
  • 一个包含模版相关属性的数据对象
  • 子节点列表
    调用createElement方法,我们可以得到一个VNode。

这也就是是渲染函数可以生成VNode的原因:渲染函数其实是执行了createElement,而createElement可以创建一个VNode。

相关文章:

vuejs源码阅读之代码生成器

代码生成器是模版编译的最后以后&#xff0c;它的作用是将AST转换成渲染函数中的内容&#xff0c;这个内容可以称为代码字符串。 代码字符串可以被包装在函数中执行&#xff0c;这个函数就是我们通常说的渲染函数。 渲染函数被执行之后&#xff0c;可以生成一份VNode&#xf…...

【MySQL】视图(十)

&#x1f697;MySQL学习第十站~ &#x1f6a9;本文已收录至专栏&#xff1a;MySQL通关路 ❤️文末附全文思维导图&#xff0c;感谢各位点赞收藏支持~ 一.引入 视图&#xff08;View&#xff09;是一种虚拟存在的表。视图中的数据并不在数据库中实际存在&#xff0c;行和列数据…...

面试手写实现Promise.all

目录 前言常见面试手写系列Promise.resolve 简要回顾源码实现Promise.reject 简要回顾源码实现Promise.all 简要回顾源码实现Promise.allSettled 简要回顾源码实现Promise.race 简单回顾源码实现结尾 前言 (?﹏?)曾经真实发生在一个朋友身上的真实事件&#xff0c;面试官让…...

TCP网络通信编程之字符流

【案例1】 【题目描述】 【 注意事项】 (3条消息) 节点流和处理流 字符处理流BufferedReader、BufferedWriter&#xff0c;字节处理流-BufferedInputStream和BufferedOutputStream (代码均正确且可运行_Studying~的博客-CSDN博客 1。这里需要使用字符处理流&#xff0c;来将…...

佰维存储面向旗舰智能手机推出UFS3.1高速闪存

手机“性能铁三角”——SoC、运行内存、闪存决定了一款手机的用户体验和定位&#xff0c;其中存储器性能和容量对用户体验的影响越来越大。 针对旗舰智能手机&#xff0c;佰维推出了UFS3.1高速闪存&#xff0c;写入速度最高可达1800MB/s&#xff0c;是上一代通用闪存存储的4倍以…...

降龙十八掌

目录 大数据&#xff1a; 1 HIVE&#xff1a; 1.1 HIVE QL 1.1.1 创建表 1.1.2 更新表 1.1.3 常用语句 1.2 hive参数配置 大数据&#xff1a; 1 HIVE&#xff1a; 1.1 HIVE QL DDL中常用的命令有&#xff1a;create&#xff0c;drop&#xff0c;alter&#xff0c;trunc…...

【项目设计】MySQL 连接池的设计

目录 &#x1f449;关键技术点&#x1f448;&#x1f449;项目背景&#x1f448;&#x1f449;连接池功能点介绍&#x1f448;&#x1f449;MySQL Server 参数介绍&#x1f448;&#x1f449;功能实现设计&#x1f448;&#x1f449;开发平台选型&#x1f448;&#x1f449;MyS…...

Ubuntu系统adb开发调试问题记录

Ubuntu系统adb开发调试问题记录 一、adb devices no permissions二、自定义adb server端口三、动态库目录四、USB抓包 一、adb devices no permissions lsusb -t 设备树直观地查看设备的Bus ID和Device Num&#xff0c;lsusb找到对应的PID和VID编辑udev规则 sudo vim /etc/ud…...

【宏定义】——检验条件是否成立,并返回指定的值

文章目录 功能说明实现示例解析扩展 功能说明 宏检验条件是否成立&#xff0c;并返回指定的值 #define TU_VERIFY(...) _GET_3RD_ARG(__VA_ARGS__, TU_VERIFY_2ARGS, TU_VERIFY_1ARGS, UNUSED)(__VA_ARGS__)TU_VERIFY(1) 检验为真&#xff0c;啥也不干TU_VERIFY(0) 校验为假&…...

UE5引擎源码小记 —反射信息注册过程

序 最近看了看反射相关的知识&#xff0c;用不说一点人话的方式来说&#xff0c;反射是程序在运行中能够动态获取修改或调用自身属性的东西。 一开始我是觉得反射用处好像不大&#xff0c;后续查了下一些反射的使用环境&#xff0c;发现我格局小了&#xff0c;我觉得用处不大的…...

Redis缓存预热

说明&#xff1a;项目中使用到Redis&#xff0c;正常情况&#xff0c;我们会在用户首次查询数据的同时把该数据按照一定命名规则&#xff0c;存储到Redis中&#xff0c;称为冷启动&#xff08;如下图&#xff09;&#xff0c;这种方式在一些情况下可能会给数据库带来较大的压力…...

Android 耗时分析(adb shell/Studio CPU Profiler/插桩Trace API)

1.adb logcat 查看冷启动时间和Activity显示时间&#xff1a; 过滤Displayed关键字&#xff0c;可看到Activity的显示时间 那上面display后面的是时间是指包含哪些过程的时间呢&#xff1f; 模拟在Application中沉睡1秒操作&#xff0c;冷启动情况下&#xff1a; 从上可知&…...

保护隐私与安全的防关联、多开浏览器

随着互联网的不断发展&#xff0c;我们越来越离不开浏览器这个工具&#xff0c;它为我们提供了便捷的网络浏览体验。然而&#xff0c;随着我们在互联网上的活动越来越多&#xff0c;我们的个人信息和隐私也日益暴露在网络风险之下。在这种背景下&#xff0c;为了保护个人隐私和…...

CloudStudio搭建Next框架博客_抛开电脑性能在云端编程(沉浸式体验)

文章目录 ⭐前言⭐进入cloud studio工作区指引&#x1f496; 注册coding账号&#x1f496; 选择cloud studio&#x1f496; cloud studio选择next.js&#x1f496; 安装react的ui框架&#xff08;tDesign&#xff09;&#x1f496; 安装axios&#x1f496; 代理请求跨域&#x…...

【FPGA IP系列】FIFO深度计算详解

FIFO(First In First Out)是一种先进先出的存储结构&#xff0c;经常被用来在FPGA设计中进行数据缓存或者匹配传输速率。 FIFO的一个关键参数是其深度&#xff0c;也就是FIFO能够存储的数据条数&#xff0c;深度设计的合理&#xff0c;可以防止数据溢出&#xff0c;也可以节省…...

JavaScript中语句和表达式

在JavaScript编程中&#xff0c;Statements和Expressions都是代码的构建块&#xff0c;但它们有不同的特点和用途。 ● Statements&#xff08;语句&#xff09;是执行某些操作的完整命令&#xff1b;每个语句通常以分号结束。例如&#xff0c;if语句、for语句、switch语句、函…...

打卡力扣题目十

#左耳听风 ARST 打卡活动重启# 目录 一、题目 二、解决方法一 三、解决方法二 关于 ARTS 的释义 —— 每周完成一个 ARTS&#xff1a; ● Algorithm: 每周至少做一个 LeetCode 的算法题 ● Review: 阅读并点评至少一篇英文技术文章 ● Tips: 学习至少一个技术技巧 ● Shar…...

UniApp实现API接口封装与请求方法的设计与开发方法

UniApp实现API接口封装与请求方法的设计与开发方法 导语&#xff1a;UniApp是一个基于Vue.js的跨平台开发框架&#xff0c;可以同时开发iOS、Android和H5应用。在UniApp中&#xff0c;实现API接口封装与请求方法的设计与开发是一个十分重要的部分。本文将介绍如何使用UniApp实…...

利用小波分解信号,再重构

function [ output_args ] example4_5( input_args ) %EXAMPLE4_5 Summary of this function goes here % Detailed explanation goes here clc; clear; load leleccum; s leleccum(1:3920); % 进行3层小波分解&#xff0c;小波基函数为db2 [c,l] wavedec(s,3,db2); %进行…...

QT数据库编程

ui界面 mainwindow.cpp #include "mainwindow.h" #include "ui_mainwindow.h" #include <QButtonGroup> #include <QFileDialog> #include <QMessageBox> MainWindow::MainWindow(QWidget* parent): QMainWindow(parent), ui(new Ui::M…...

500+精选RSS源如何解决信息获取难题:Awesome RSS Feeds全解析

500精选RSS源如何解决信息获取难题&#xff1a;Awesome RSS Feeds全解析 【免费下载链接】awesome-rss-feeds Awesome RSS feeds - A curated list of RSS feeds (and OPML files) used in Recommended Feeds and local news sections of Plenary - an RSS reader, article dow…...

vue基于springboot的目的地旅游预订网站

目录同行可拿货,招校园代理 ,本人源头供货商功能模块划分技术实现要点扩展功能建议性能优化方向项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作同行可拿货,招校园代理 ,本人源头供货商 功能模块划分 用户模块 用户注册与登录…...

OSI七层模型的意义:网络世界的工程思维密码

理解七层网络模型&#xff08;OSI模型&#xff09;的意义&#xff0c;不在于死记硬背哪一层叫什么名字&#xff0c;而在于它能帮你建立一套拆解复杂系统的思维框架。具体来说&#xff0c;学习它主要有以下几层价值&#xff1a;1. 建立“分而治之”的工程思维网络通信是一个极其…...

终极B站界面美化指南:如何用BewlyBewly插件快速打造个性化体验

终极B站界面美化指南&#xff1a;如何用BewlyBewly插件快速打造个性化体验 【免费下载链接】BewlyBewly Just make a few small changes to your Bilibili homepage. (English | 简体中文 | 正體中文 | 廣東話) 项目地址: https://gitcode.com/gh_mirrors/be/BewlyBewly …...

foobar2000界面美化终极指南:3步打造你的专属音乐播放器

foobar2000界面美化终极指南&#xff1a;3步打造你的专属音乐播放器 【免费下载链接】foobox-cn DUI 配置 for foobar2000 项目地址: https://gitcode.com/GitHub_Trending/fo/foobox-cn 还在为foobar2000那套单调乏味的默认界面感到困扰吗&#xff1f;今天我要为你介绍…...

MATLAB与AI结合:使用Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF进行科学计算与数据分析

MATLAB与AI结合&#xff1a;使用Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF进行科学计算与数据分析 1. 科研与工程中的智能计算新范式 想象一下这样的场景&#xff1a;你正在处理一组复杂的实验数据&#xff0c;需要快速实现滤波、拟合和可视化。传统方式可能需要…...

避坑指南:用高德DistrictSearch获取精准行政边界时遇到的5个典型问题(含最新GeoJson处理技巧)

高德DistrictSearch深度避坑&#xff1a;5个实战难题与GeoJson优化方案 当你在深夜调试地图边界数据时&#xff0c;突然发现某个街道的轮廓出现了诡异的锯齿状变形——这不是恐怖片情节&#xff0c;而是使用高德DistrictSearch时可能遇到的真实场景。作为经历过数十个地图项目…...

从羊肠小道到智能高速:HTTP1到HTTP3的演进之路

引言 计算机网络就像一张遍布全球的道路系统&#xff0c;服务器是一座座城市、村庄&#xff0c;客户端是穿梭其中的车辆&#xff0c;而HTTP协议&#xff0c;就是规范车辆通行、货物传递的交通规则。从HTTP1到HTTP3的演进&#xff0c;本质上就是这条“网络道路”的升级史——从泥…...

OpenClaw开源项目深度体验:对比其与星图GPU平台Qwen3-14B-Int4-AWQ部署差异

OpenClaw开源项目深度体验&#xff1a;对比其与星图GPU平台Qwen3-14B-Int4-AWQ部署差异 1. 项目概览与核心功能 OpenClaw是近期备受关注的开源大模型项目&#xff0c;主打轻量化和易部署特性。它采用混合专家架构(MoE)&#xff0c;在保持模型性能的同时显著降低了计算资源需求…...

Qwen3-TTS快速部署教程:一键启动Web服务,3分钟开始声音克隆

Qwen3-TTS快速部署教程&#xff1a;一键启动Web服务&#xff0c;3分钟开始声音克隆 1. 为什么选择Qwen3-TTS进行语音克隆 想象一下这样的场景&#xff1a;你需要为海外客户录制多语言产品介绍&#xff0c;但雇佣专业配音演员成本高昂&#xff1b;或者想为自己的视频内容添加个…...