Vue的初步认识

一、特性

1.数据双向绑定

2.虚拟DOM

传统的对DOM进行操作，会发生重绘或者重排，从而导致资源浪费，渲染页面会变慢，例如下：

 

虚拟DOM的核心：预计算dom的各种操作，把最后一次结果渲染出来（减少DOM的渲染次数）

• 提供与真实DOM节点所对应的虚拟节点VNode

• 将虚拟节点VNode和旧虚拟节点oldVNode进行对比，然后更新视图

3.组件化开发

二、优点

1.渐进式

2.体积小

3.更高的运行效率

4.双向数据绑定

5.生态丰富

三、联想小知识

Document.createDocumentFragment()

创建一个新的空白的文档片段 ( DocumentFragment)。

语法

let fragment = document.createDocumentFragment();

fragment 是一个指向空DocumentFragment对象的引用。

描述

DocumentFragments 是 DOM 节点。它们不是主 DOM 树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到 DOM 树。在 DOM 树中，文档片段被其所有的子元素所代替。

因为文档片段存在于内存中，并不在 DOM 树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。

示例

此示例创建主流 Web 浏览器的列表。

HTML

<ul id="ul"></ul>

JavaScript

jsCopy to Clipboardplay

var element = document.getElementById("ul"); // assuming ul exists
var fragment = document.createDocumentFragment();
var browsers = ["Firefox", "Chrome", "Opera", "Safari", "Internet Explorer"];

browsers.forEach(function (browser) {
  var li = document.createElement("li");
  li.textContent = browser;
  fragment.appendChild(li);
});

element.appendChild(fragment);

结果

什么是DOM树？

参考博客：

什么是DOM?你了解DOM树吗？-优快云博客

四、最后

学习VUE之前需要有JavaScript、node、webpack的基础，如果没有学过的小伙伴可以先暂停VUE的学习~~~