Was für ein Framework ist vuejs?

vuejs ist ein fortschrittliches JavaScript-Framework zum Erstellen von Benutzeroberflächen. Die Kernbibliothek von Vue konzentriert sich nur auf die Ansichtsebene, die nicht nur einfach zu starten ist, sondern auch leicht in Bibliotheken von Drittanbietern oder bestehende Projekte integriert werden kann. Das Ziel von Vue.js besteht darin, eine reaktionsfähige Datenbindung und zusammengesetzte Ansichtskomponenten über eine möglichst einfache API zu implementieren.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Vue (ausgesprochen /vjuː/, ähnlich wie view) ist ein progressives JavaScript-Framework zum Erstellen von Benutzeroberflächen. Im Gegensatz zu anderen großen Frameworks ist Vue so konzipiert, dass es Schicht für Schicht von unten nach oben aufgetragen werden kann. Die Kernbibliothek von Vue konzentriert sich nur auf die Ansichtsebene, die nicht nur einfach zu starten ist, sondern auch leicht in Bibliotheken von Drittanbietern oder bestehende Projekte integriert werden kann. Andererseits ist Vue in Kombination mit einer modernen Toolkette und verschiedenen unterstützenden Bibliotheken durchaus in der Lage, Treiber für komplexe Single-Page-Anwendungen (SPA) bereitzustellen.

Das Ziel von Vue.js besteht darin, reaktionsfähige Datenbindung und zusammengesetzte Ansichtskomponenten über eine möglichst einfache API zu implementieren.

Vue.js selbst ist kein umfassendes Framework – es konzentriert sich nur auf die Ansichtsebene. Daher ist es sehr einfach zu erlernen und sehr einfach in andere Bibliotheken oder bestehende Projekte zu integrieren. Andererseits kann Vue.js auch komplexe Single-Page-Anwendungen unterstützen, wenn es mit zugehörigen Tools und Support-Bibliotheken verwendet wird.

Vorteile von Vue.js

• Geringe Größe: nur 33 KB nach der Komprimierung;

• Höhere Betriebseffizienz: Basierend auf dem virtuellen DOM kann man im Voraus verschiedene Berechnungen über JavaScript durchführen und das endgültige DOM A konvertieren Technologie, die Operationen berechnet und optimiert, da es sich bei dieser DOM-Operation um eine Vorverarbeitungsoperation handelt, die das DOM nicht tatsächlich betreibt. Setzen Sie mehr Energie in die Geschäftslogik.

• Umfangreiche Ökologie und niedrige Lernkosten: Es gibt eine große Anzahl ausgereifter und stabiler UI-Frameworks und -Komponenten auf Basis von vue.js, mit denen eine schnelle Entwicklung erreicht werden kann Anfänger freundlich, einfach zu starten, viele Lernmaterialien; Webseiten werden immer komplexer. Diese Fortschritte sind untrennbar mit JavaScript verbunden. Bei der aktuellen Entwicklung wurde viel serverseitiger Code zur Ausführung in den Browser gelegt, der tausende Zeilen JavaScript-Code generiert, die mit verschiedenen HTML- und CSS-Dateien verbunden sind, allerdings fehlt es an einer formalen Organisationsform. Dies ist auch der Grund, warum immer mehr Frontend-Entwickler JavaScript-Frameworks verwenden. Zu den beliebtesten Frontend-Frameworks gehören derzeit Angular, Reac, Vue usw.

Vue ist ein benutzerfreundliches, vielseitiges und leistungsstarkes JavaScript-Framework, das Ihnen dabei helfen kann, eine besser wartbare und testbare Codebasis zu erstellen. Vue ist ein progressives JavaScript-Framework. Wenn Sie also bereits über eine vorgefertigte Serveranwendung verfügen, können Sie Vue als Teil der Anwendung einbetten, um ein umfassenderes interaktives Erlebnis zu bieten. Oder wenn Sie mehr Geschäftslogik im Frontend implementieren möchten, können die Kernbibliothek und das Ökosystem von Vue auch Ihre verschiedenen Anforderungen erfüllen.

• Wie andere Frameworks können Sie mit Vue eine Webseite in wiederverwendbare Komponenten unterteilen. Jede Komponente enthält ihr eigenes HTML, CSS und JavaScript, um die entsprechende Stelle auf der Webseite darzustellen. Wenn wir eine große Anwendung erstellen, müssen wir möglicherweise Dinge in separate Komponenten und Dateien aufteilen. Mit den Befehlszeilentools von Vue ist es sehr einfach, ein echtes Projekt schnell zu initialisieren.

  vue init webpack my-project

Wir können sogar die Einzeldateikomponenten von Vue verwenden, die ihr eigenes HTML, JavaScript und bereichsbezogenes CSS oder SCSS enthalten.

Das Prinzip der Datensteuerung (bidirektionale Datenbindung)

Was ist datengesteuert?

Datengesteuert ist das größte Merkmal von Vue.js. In Vue bedeutet das sogenannte datengesteuert, dass sich die Benutzeroberfläche entsprechend ändert, wenn sich die Daten ändern, und Entwickler das DOM nicht manuell ändern müssen.

Wenn wir beispielsweise auf eine Schaltfläche klicken, muss der Text des Elements einen „Ja/Nein“-Umschaltvorgang durchführen. In herkömmlichem jQuery besteht der Prozess der Seitenänderung normalerweise darin, das Ereignis an die Schaltfläche zu binden und dann abzurufen Kopieren Sie das entsprechende Element des Dom-Objekts und ändern Sie schließlich den Textwert des Dom-Objekts entsprechend dem Schalter.

Vue implementiert datengesteuert vue implementiert die bidirektionale Datenbindung hauptsächlich durch Datenhijacking in Verbindung mit dem Publisher-Subscriber-Modell, indem

bei Datenänderungen Nachrichten an Abonnenten veröffentlicht und entsprechende Überwachungsrückrufe auslöst.

Wenn ein normales JavaScript-Objekt als Datenoption an eine Vue-Instanz übergeben wird, durchläuft Vue seine Eigenschaften und konvertiert sie mithilfe von Object.defineProperty in Getter/Setter. Die Getter/Setter sind für den Benutzer nicht sichtbar, aber intern ermöglichen sie Vue, Abhängigkeiten zu verfolgen und Änderungen zu benachrichtigen, wenn auf Eigenschaften zugegriffen und diese geändert werden.

vue的数据双向绑定将MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的Model的数据变化，通过Compile来解析编译模板指令（vue中用来解析{{}}模板语法），最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到 数据变化 —> 视图更新；视图交互变化（input）—> 数据model变更 双向绑定效果。

getter和setter的理解

当打印出vue实例下的data对象里的属性，它的每个属性都有两个对应的get和set方法。顾名思义，get为取值方法，set为赋值方法。正常情况下，取值和赋值是用 obj.prop 的方式，但是这样做有一个问题，我们如何知道对象的值改变了？

我们可以把get和set理解为function，当我们调用对象的属性时，会进入到 get.属性(){…} 中，先判断对象是否有这个属性，如果没有，那么就添加一个name属性，并给它赋值；如果有name属性，那么就返回name属性。可以把get看成一个取值的函数，函数的返回值就是它拿到的值。

当给实例赋值时，会进入 set.属性(val){…} 中，形参val就是赋给属性的值，在这个函数里做了很多事情，比如双向绑定等等。因为这个值每次都要经过set，其他方式无法对该值做修改。在ES5中，对象原型有两个属性，_defineGetter_ 和 _defineSetter_ ，专门用来给对象绑定get和set。

虚拟DOM

什么是虚拟DOM

在Vue.js 2.0版本中引入了 Virtual DOM 的概念，Virtual DOM 其实就是一个以JavaScript对象（VNode节点）作为基础来模拟DOM结构的树形结构，这个树形结构包含了整个DOM结构的信息。简单来说，可以把Virtual DOM理解为一个简单的JS对象，并且最少包含标签名（tag）、属性（attrs）和子元素对象（children）三个属性。不同的框架对这三个属性的命名会有所差别。

模板转换成视图的过程

通过一个简单的实例，来说明虚拟DOM到真实DOM的渲染过程：

创建模板：

<ul id="app">
	<li v-for="item in list">{{item}}</li>
</ul>

首先将上面的模板编译成渲染函数：

createElement(
	"ul", //节点标签名
	{ //标签上的属性，用对象存储键值对
		attr:{
			id:"app"
		}
	},
	[ //该节点的子节点
		createElement("li",1),
		createElement("li",2),
		createElement("li",3)
	]
)

然后将上面的渲染函数，渲染出虚拟DOM树：

VNode: {
	child: undefined,
	children: [
		VNode-0:{...},
		VNode-1:{...},
		VNode-2:{...}
	],
	elm:{...} //ul
}

最后由虚拟DOM树生成真实DOM：

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

实现过程如下图：

虚拟DOM的作用

虚拟DOM的最终目标是将虚拟节点渲染到视图上。但是如果直接使用虚拟节点覆盖旧节点的话，会有很多不必要的DOM操作。例如，一个ul标签下有很多个li标签，其中只有一个li标签有变化，这种情况下如果使用新的ul去替代旧的ul，会因为这些不必要的DOM操作而造成性能上的浪费。

为了避免不必要的DOM操作，虚拟DOM在虚拟节点映射到视图的过程中，将虚拟节点与上一次渲染视图所使用的旧虚拟节点做对比，找出真正需要更新的节点来进行DOM操作，从而避免操作其他不需要改动的DOM元素。

其实，虚拟DOM在Vue.js中主要做了两件事情：

• 提供与真实DOM节点所对应的虚拟节点VNode
• 将虚拟节点VNode和旧虚拟节点oldVNode进行对比，然后更新视图

为什么要使用虚拟DOM

• 具备跨平台优势，由于Virtual DOM 是以JavaScript对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如说浏览器平台、Weex、Node等。
• 操作DOM慢，JS运行效率高，可以将DOM对比操作放在JS层，提高效率。因为DOM操作的执行速度远不如JavaScript运算速度快，因此，把大量的DOM操作搬运到JavaScript中，运用patching算法来计算出真正需要更新的节点，最大限度地减少DOM操作，从而显著提高性能。Vritual DOM本质上就是在JS和DOM之间做了一个缓存，JS只操作Virtual DOM，最后把变更写入到真实DOM。
• 提高渲染性能，Virtual DOM的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新。

相关推荐：《vue.js教程》

Das obige ist der detaillierte Inhalt vonWas für ein Framework ist vuejs?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!