Vue template到render过程,以及render的调用时机

Vue template到render过程

  • vue的模版编译过程主要如下:template -> ast -> render函数
  • (1)调用parse方法将template转化为ast(抽象语法树)
  • (2)对静态节点做优化
  • (3)生成代码
  • render函数的调用时机

vue的模版编译过程主要如下:template -> ast -> render函数

vue 在模版编译版本的码中会执行 compileToFunctions 将template转化为render函数:

// 将模板编译为render函数
const { render, staticRenderFns } = compileToFunctions(template,options, this)

CompileToFunctions中的主要逻辑如下∶

(1)调用parse方法将template转化为ast(抽象语法树)

constast = parse(template.trim(), options)

parse的目标:把tamplate转换为AST树,它是一种用 JavaScript对象的形式来描述整个模板。
解析过程:利用正则表达式顺序解析模板,当解析到开始标签、闭合标签、文本的时候都会分别执行对应的 回调函数,来达到构造AST树的目的。
AST元素节点总共三种类型:type为1表示普通元素、2为表达式、3为纯文本

(2)对静态节点做优化

optimize(ast,options)

这个过程主要分析出哪些是静态节点,给其打一个标记,为后续更新渲染可以直接跳过静态节点做优化

深度遍历AST,查看每个子树的节点元素是否为静态节点或者静态节点根。如果为静态节点,他们生成的DOM永远不会改变,这对运行时模板更新起到了极大的优化作用。

(3)生成代码

const code = generate(ast, options)

generate将ast抽象语法树编译成 render字符串并将静态部分放到 staticRenderFns 中,最后通过 new Function(“render”) 生成render函数。

render函数的调用时机

在beforeMount生命周期钩子期间调用,因为此时,模板编译已完成,但是为渲染成真实DOM

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/741975.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux编程4.1 网络编程-前导

1、内容概述 网络的基本概念TCP/IP协议概述OSI和TCP/IP模型掌握TCP协议网络基础编程掌握UDP协议网络基础檹网络高级编程 2、计算机联网的目的 使用远程资源共享信息、程序和数据分布处理 3、基本概念 单服务与多客户端的进程间通信C/S client server 由于,跨计…

模型量化(二)—— 训练后量化PTQ(全代码)

训练后量化(Post-training Quantization,PTQ)是一种常见的模型量化技术,它在模型训练完成之后应用,旨在减少模型的大小和提高推理速度,同时尽量保持模型的性能。训练后量化对于部署到资源受限的设备上&…

【Android】TextView前增加红色必填项星号*

自定义属性 <?xml version"1.0" encoding"utf-8"?> <resources><declare-styleable name"NecessaryTextView"><attr name"necessary" format"boolean" /></declare-styleable> </resou…

通过对话式人工智能实现个性化用户体验

智能交流新时代&#xff1a;如何选择对话式人工智能产品 在快速发展的数字环境中&#xff0c;对话式人工智能正在彻底改变企业与客户互动的方式。 通过集成机器学习、自然语言处理和语音识别等先进技术&#xff0c;对话式人工智能可提供个性化、无缝的用户体验。 了解对话式人…

中间件 | Kafka - [常见问题]

INDEX 1 消息丢失1.1 消息丢失位置1.2 如何避免消息丢失 2 顺序消费 1 消息丢失 1.1 消息丢失位置 1&#xff1a;producer 向 kafka 投递消息时2&#xff1a;kafka-topic 中 leader 已经写入了消息&#xff0c;向副本写入消息前挂了时3&#xff1a;消费者从 kafka 拉取了消息&…

java正整数校验

在Java中&#xff0c;校验一个字符串是否表示正整数通常可以通过以下几种方法实现&#xff1a; 方法1&#xff1a;使用正则表达式 import java.util.regex.Pattern; import java.util.regex.Matcher;public class NumberValidationUtils {public static boolean isPositiveIn…

3月13日做题总结(Linux真题)

第一题 SPI接口的三线制有哪三线&#xff1f; A---MISO B---MOSI C---CS D---CLK 正确答案&#xff1a;ABD 解析&#xff1a;SPI通常有4根线&#xff08;四线制&#xff09;&#xff0c;可实现全双工通信 【CLK】: 串行时钟&#xff08;Serial Clock&#xff09; 【MOSI…

OSCP靶场--Depreciated

OSCP靶场–Depreciated 考点(1. graphql枚举 2.CVE-2021-4034提权) 1.nmap扫描 ┌──(root㉿kali)-[~/Desktop] └─# nmap -sV -sC -p- 192.168.155.170 --min-rate 2500 Starting Nmap 7.92 ( https://nmap.org ) at 2024-03-13 04:19 EDT Nmap scan report for 192.168.…

平台靠不住了,独立站,自主权,LTD营销枢纽助力企业应对全球化挑战

当今全球化的市场环境中&#xff0c;我国的出海品牌和供应链面临着很大的挑战&#xff0c;但同时也蕴含着机遇。随着跨境电商的兴起&#xff0c;像亚马逊、TikTok等大的电商平台成为中国卖家走向世界的重要桥梁。不过&#xff0c;平台的政策改变和外部环境的不确定性因素给依赖…

Rabbit算法:轻量高效的加密利器

title: Rabbit算法&#xff1a;轻量高效的加密利器 date: 2024/3/13 18:14:31 updated: 2024/3/13 18:14:31 tags: Rabbit算法流密码高安全性高性能密钥调度加密解密抗攻击性 Rabbit算法起源&#xff1a; Rabbit算法是由Martin Boesgaard和Mette Vesterager提出的一种流密码算…

(C语言)strcpy与strcpy详解,与模拟实现

目录 1. strcpy strcpy模拟实现&#xff1a; 实现方法1&#xff1a; 实现方法2&#xff1a; 2. strcat strcat模拟实现&#xff1a; 1. strcpy 作用&#xff1a;完成字符串的复制。 头文件&#xff1a;<string.h> destination是字符串要复制到的地点&#xff0c;s…

这款自动引流软件居然能让你的营销效果翻倍提升!

在数字化时代&#xff0c;营销策略的高效执行对企业来说至关重要。自动引流软件作为现代企业营销工具箱中的一员&#xff0c;其重要性不言而喻。这类软件通过智能化、自动化的方式&#xff0c;将潜在客户吸引到企业的销售渠道中&#xff0c;从而为企业带来可观的收益和品牌曝光…

SpringBoot集成netty实现websocket通信

实现推送消息给指定的用户 一、依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://m…

武汉儿童医院变电所电力运维平台系统的设计及应用

彭姝麟 Acrelpsl 1 引言 2015年国务院发布《中共中央、国务院关于进一步深化电力体制改革的若干意见》&#xff08;中发[2015]9号&#xff09;&#xff0c;简称“电改9号文”。而本次新电改的重点是“三放开一独立三强化”&#xff1a;输配以外的经营性电价放开、售电业务放开…

法规解读 | 坚持总体国家安全观,新修订的《保守国家秘密法》今年5月1日起施行!

2024年2月27日&#xff0c;第十四届全国人大常委会第八次会议表决通过新修订的《中华人民共和国保守国家秘密法》&#xff08;以下简称保密法&#xff09;&#xff0c;自2024年5月1日起施行。 本次保密法修订坚持总体国家安全观&#xff0c;统筹发展与安全。 一方面吸收了一些工…

政务云安全风险分析与解决思路探讨

1.1概述 为了掌握某市政务网站的网络安全整体情况&#xff0c;在相关监管机构授权后&#xff0c;我们组织人员抽取了某市78个政务网站进行安全扫描&#xff0c;通过安全扫描&#xff0c;对该市政务网站的整体安全情况进行预估。 1.2工具扫描结果 本次利用漏洞扫描服务VSS共扫…

EDGE pkl 播放

目录 EDGE pkl 播放 python代码: EDGE pkl 播放 python代码: import os import pickle from pathlib import Path from tempfile import TemporaryDirectoryimport librosa as lr import matplotlib.animation as animation import matplotlib.pyplot as plt import numpy a…

管道...

问题描述 有一根长度为 len的横向的管道&#xff0c;该管道按照单位长度分为len段&#xff0c;每一段的中央有一个可开关的阀门和一个检测水流的传感器。 开始管道是空的&#xff0c;位于工&#xff0c;的阀门会在S时刻打开&#xff0c;并不断让水流入管道。 对于位于 工的阀门…

app逆向-ratel框架-sekiro框架的安装使用

文章目录 一、前言二、初次尝试三、原⽣APP的使⽤四、ratel框架结合sekiro框架使用 一、前言 sekiro主要支持多节点的程序调用&#xff0c;所以他归属于RPC&#xff08;Remote Procedure Call&#xff09;框架&#xff1a;API管理、鉴权、分布式、负载均衡、跨语言 开源文档&…

如何在群晖NAS部署WPS容器并实现无公网IP远程访问本地office软件

文章目录 1. 拉取WPS Office镜像2. 运行WPS Office镜像容器3. 本地访问WPS Office4. 群晖安装Cpolar5. 配置WPS Office远程地址6. 远程访问WPS Office小结 7. 固定公网地址 wps-office是一个在Linux服务器上部署WPS Office的镜像。它基于WPS Office的Linux版本&#xff0c;通过…