Vue源码

最新推荐文章于 2024-10-04 00:46:18 发布

青春最美，庆幸遇见karry

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量167

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_41379824/article/details/125447621

版权

本文深入探讨Vue的模板引擎mustache，解析其底层核心机理，包括正则表达式实现简单模板引擎、Scanner的使用、tokens转化及数据解析。此外，文章还介绍了虚拟DOM的概念，snabbdom的h函数工作原理，以及关键的diff算法，包括不同情况下的节点比较和操作策略。

摘要由CSDN通过智能技术生成

Vue源码

一、模板引擎 mustache

1. 模板引擎的含义

a. 将数据变为视图的最优雅的解决方案
b. 以往数据渲染方法
纯DOM法
数组的join方法
ES6中的反引号法

2. mustache的基本使用

Mustache.render(模板字符串，数据)

{{ #循环的开始数组 }}  {{ .表示简单数据 }}/{{ 每个数据的属性 }}  {{ /循环结束}}
{{#数据也可以是布尔值表示标签显不显示}} {{ /数据 }}

3.mustache的底层核心机理

1. 使用正则表达式实现简单的模板引擎

const data={
	thing:"苹果",
	mood:"很好吃"
}
const templateStr="<h1>我买了一个{{ thing }},味道{{ mood }}"
function render(templateStr,data){
    return templateStr.replace(/\{\{(\w+)\}\}/g,function(a,$1){
    return data[$1]
	})
}
const result=render(templateStr,data)