Google的新框架是Google Blessing的框架引起了我的兴趣，因此我只是简单地理解并与您分享了学习结果。由于该框架仍处于明确的迭代状态，因此本文中提到的一些代码实施可能是已重建。有兴趣的学生可以移交源代码。
这是一个基于内置的前端框架。基本上可以理解前任，这提供了以下竞争特征
这与促使我注意这个框架的框架无关（卖出，我有时间说，我不学习它），因为对于某些通用商业代码，小规模和框架是在运行时与框架无关，是最核心的两者。
我个人认为，组件是快速发展前端和增长的相对重要原因。考虑编写JQ的时代，HTML代码基本上看起来像这样
即使模板语法稍后出现，情况也不会变得更好（与服务器端列端模板 - > JSP的协作或将JS封装在JS中，通过模板语法 - > handlebars将其注入），简单的循环循环渲染可以方便地解决DOM复制问题可能方便，但是交叉级别的重用仍然是一个问题。
因此，组件化是要有一个想要进一步开发的前端框架技术的必不可少的步骤。它是创建浏览器本机支持的可重复使用元素（自定义组件）的能力，并且它基于构造。
然后，我们需要先了解Web-Component
让我们首先了解Web组件的两个核心要点。如果您了解这两个属性，则可以构建自己的组件。
首先，我们需要注册由浏览器提供的****接口提供的自定义元素，并在其上安装了实例
CustomElementRegrization方法可用于注册自定义元素。有两种类型的选项可用
API如下
名称是您的自定义元素的名称（根据DOMSTRING标准，您必须携带一条短水平线）。例如，可以以我们定义我们定义的自定义元素类型的组件选项的形式使用构造函数。在存在的情况下，只有一个可用的扩展名，并且指定了哪些元素。定义继承了哪些元素后，使用方法与自定义元素不一致。您需要使用IS属性。假设您定义了一个自定义的内置元素，称为p tag。
从这个角度来看，逻辑的核心在于构造函数。我们如何定义自己的组件？与React和Vue不同，您可以在渲染方法中编写JSX或时间语法来创建Vdom树来定义组件结构。它没有提供编写模板的方法（但这也是如此）这意味着他可以使用任何临时语法）。通常使用常规的DOM操作在constructionor中创建您的组件结构。锻炼栗子：
以上代码基于双层层嵌套创建文本节点
当然，创建UI并不有趣。让我们考虑一下。现代框架提供什么能力？
响应！事件绑定！生命周期！
好，安排。
让我们谈谈更简单的事件绑定。由于DOM是在内部创建的，因此绑定事件也很容易举起（请注意）
根据上一篇文本，还有一个附加按钮。单击此按钮以删除整个自定义元素（当然，此按钮也可以由组件本身创建））））
然后，让我们谈谈生命周期接受的构造函数，customelemnts.define，允许开发人员定义以下生命周期并被称为
简而言之，这是
因为没有国家的概念，所以所有组件的所有属性的变化都要求我们手动处理它，并且精神负担可能会稍大一些。当然，它们也可以用作自定义元素的属性来处理
一路上，属性更改的恢复响应出现（当然，只有响应的基础，属性更改不会直接对内部渲染逻辑，心理负担+1），回调函数必须通过定义来聆听此属性获取功能
查看代码，此处定义了带有输入框的组件。输入输入框后，组合网中的文本将被重新填充。在同一时间，请收听样式属性并在更改后打印出来（毫无意义的演示+1）
有很多好处。主要角色是“他可以将独立的DOM（样式标签也属于）附加到元素（此DOM是隐藏的），并且不会影响外部样式。包装能力，可以完全隐藏组件的结构，样式和行为，隔离到外部”
有一个概念需要遵循 - 回到末端的位置，以及常规DOM开始的地方。整个样式和元素不会影响超过外部的范围。
Shadow dom并不是一件新事物 - 过去很长一段时间以来，浏览器将其用于封装某些元素的内部结构。以默认的播放控制按钮作为示例，请访问一个元素。所有可以看到的是标签。实际上，在其阴影DOM中包括一系列按钮和其他控制器。影子DOM标准允许您维护自己元素的一组阴影DOM。
那么如何使用它？有一个核心API，element.attachshadow（{mode：}），可以将阴影根附加到任何元素上。该模式的值是打开或关闭的。区别在于是否可以从外部获得阴影的结构。如果您想了解有关开放和关闭之间的差异的更多信息，请参阅https：//blog.revillweb。com/open-ds封闭的dom-9f3d7427d1af本文将不描述。
因此，以上述最简单的例子进行转换
这样，创建了基于Shadowdom的自定义元素。看来没有区别。我们添加一些自定义样式尝试
您可以尝试在页面上其他位置添加一些跨度标签，但是您会发现只有以下跨度标签生效。
以上两个属性可以创建具有内部JS操作逻辑并具有独立CSS（即Web组件）的自定义元素。我认为每个人都开始吐口水。复杂性后很难纠正。因此，如何组装更复杂的DOM，是不受欢迎的吗？不，那么您需要在此处提及另一个属性
模板元素是浏览器一直受支持的功能。将HTML渲染到屏幕时，模板中的内容将不会显示。通过JavaScript获取模板并将其渲染到页面后，它需要进行实例化。然后，我们可以将模板用作可以存储在文档中的内容片段，然后将模板填充在组件中。然后以上面的示例以上述示例。修改
这样，它有点vue，但是仍然存在缺点，您可以在my-component中读取文本属性以填充Span.info。现在看来没有能力。
目前，您需要离开我们的插槽才能做到这一点
HTML元素作为Web组件技术套件的一部分，是Web组件中的一个位置。占位符可以在后期填充自己的标签，以便您可以创建一个单独的DOM树并将其与其他组件结合在一起。
通过名称属性标记，插槽的位置表明他在模板中的位置。当另一个元素定义同名的插槽属性时，将在模板中替换此元素。我们修改以下示例
当然，这只是最简单的用法，但是在这一点上，基本上您可以开始。整体写作并不难，但是仍然有很多值得呕吐的地方（有关Web组件的更多信息）。看看我们的工作，可以使它变得更好吗？
看看我们刚才提到的内部插槽
显然，在学习过程中，您可以认为没有状态（实际上，它被理解为私人反应性属性），只有名称的成员属性。它可以简单地理解为状态和道具。
所以现在问题已经改变
LIT使用两个核心库来解决此问题，即
是的，可以理解的是，核心逻辑与JSX不同，可以创建另一个高性能字符流HTML模板引擎。Lit选择了直接继承了聚合物的LITHTML项目，并将整体框架更名为LIT。我们知道需要编译的底层是否最终是……不一样。它是基于它的，因此它可以在浏览器上运行而无需编译，并且可以通过组合更扩展。
提供两种核心方法和
lit-html.html
这是带有标签的ES6标记模板的本机语法，而不是魔术，HTML函数将接收以下参数
修改后，上述代码最终将构建一个对象，例如
您需要注意此处的方法。这两种方法可以转换为标记，这是上面提到的模板
简而言之，根据不同情况，此过程是在字符串中一一处理数据
缝制到完整的字符串中，然后将其插入创建的模板标签中。Q：如何区分代码中的真实注释？
现在通过标签模板（净值对象）获得lit-html.render。接下来，您需要调用该方法将模板渲染到页面。首先查看API，以接收带有容器的容器以完成渲染。递归渲染和更新渲染。
首先创建一个对象（从零件继承，可以理解为构造函数控制器，这是核心实现，暂时不扩展，稍后再扩展）。中间
然后将调用该方法，并将内容渲染到几种情况下。
根据以前的逻辑，肯定会首次直接进行的分支。可以简要地描述这里的逻辑。通过模板在使用对象（中间产品）中使用模板的一部分，在此处进行了一层缓存。如果有一个就绪的模板（字符串），则直接创建了准备好的模板。如果没有，它将被重新创建。将来调用渲染方法时，相同的模板（字符串值与第一个调用完全一致）是重复使用第一个模板。它可以理解为在编译期间确定的恒定值，只有更改的值数组才能变化数组
缓存过程没有开始解释。如果你感兴趣
将对象分为部分和元素，元素被Templateresult转换。遍历时会生成零件零件。简化处理过程
处理完成后
据了解，它是已形成的模板。
接下来，检查是否创建了当前实例。如果没有，实例化了
TemplateInstance将根据文字卷的类型创建NodePart和属性实例。
最终调用的方法，此方法将调用实例（实际值）和（渲染方法）方法。在这一点上，渲染的初始方法调用被循环。其余的是递归调用，直到找到原始值的类型在框架上呈现为类型。
当递归返回顶层时，它已经完成，并且足以将其插入容器中。
在这一点上，第一个渲染已完成，一般过程如下
听起来可能有点周围，我们可以暂时忽略它，这是一个中间状态
它是对模板库数量的类似描述，该库是可以理解为小框架嵌套的模型
更新渲染可以是在执行SQL期间库缓存中的类比。如果SQL结构是一致的，则将现有模型重新使用以比较一层（比较类型和模板 - 线结构）比较所有的缓存命中。
当效率关注您的状态时，当释放vue 3时，可以看出事物是诞生的。VUE-LIT，VUE-LIT基于LIT-HTML模板引擎和@Vue/eactivitya定制玩具的数据绑定。LIT本身还提供了数据绑定，一个数据响应包来支持整个框架
好的，模板具有语法，其余的就是将状态响应更改为模板中的方法。
如何使用此部分实际上并不复杂。经历过Vue开发经验的学生必须知道Vue如何绑定数据和视图。这也是如此，您需要声明这样的组成部分
定义实际上是CustomElement的语法糖果。定义，但提供了一个基类，它处理数据的响应处理（实际上是继承，具体取决于响应处理）。
反应性属性，让我们首先看一下如何定义LIT文档中的要求
我们会发现，如果需要响应属性，我们需要使用属性的装饰器来装饰属性。属性添加Getter和setter。在这里，准备工作已经准备好了。
每次修改属性更新时，将属性更新渲染到UI之后，将重新收集的渲染方法。
这与状态的概念非常相似，因此您如何处理外部传输属性（道具）的变化？在这里我们需要应用于生命周期以及每次传递到组件变化的属性，这两个周期都会被触发。只是查询是否处于中间并积极更新。此外，属性装饰也可以接受选项配置某些适应性的属性
其余的，例如装饰品，事件等，不再扩大它。有兴趣的学生可以阅读源代码，总体上比React更容易阅读。在这一点上，完成了一个完整且可用的前端框架。
由于兼容性问题不能应用于实际的业务场景，因此确实是一个值得关注和学习的框架。这些设计思想和想法中的某些人跳出了React Limit限制框架，为前端框架提供了另一种可能的解决方案。在框架领域拥有一个独特的家庭不是一件好事。还有更多美好的想法和拥抱，使前端开发更广泛。
还有一个无法应用于实际情况的问题。点亮仍在迅速迭代，每次都是一个很大的破坏变化。