虚拟DOM和diff算法

1.虚拟DOM：

1.虚拟DOM是什么：

虚拟DOM是利用js的对象的Object对象模型来模拟真实DOM，它的结构是一个树型结构。

2.虚拟DOM的优缺点：

整个虚拟DOM的使用流程：

1.创建DOM树，
2.利用render函数来渲染页面。
3.数据发生改变，即生成新的DOM树
4.通过diff算法来新旧两个虚拟DOM，将不同的地方进行修改，相同的地方就原地服用，
  最后再通过render函数进行渲染页面。
  
 **值得注意的是：render函数是vue中特有的，在前端原生中是不存在这个函数，所以想要在
 原生中使用，需要自行封装。例如：
 function render (elm, id,parentNode,...) {
     var div = document.createElement("div");
     div.id = "app";
     parentNode.appendChild("div");
 }

2.diff算法：

1.作用：
diff是用来比较两个或多个文件，返回的结果是文件的不同点。
**值得注意的是：diff是后端的思想，同时diff算法是同级比较。
2.diff算法的比较思维：

  比较后会出现四种情况：
        1、此节点是否被移除 -> 添加新的节点
        2、属性是否被改变 -> 旧属性改为新属性
        3、文本内容被改变-> 旧内容改为新内容
        4、节点要被整个替换 -> 结构完全不相同 移除整个替换

顺便一提，面试常会被问到：Vue的高性能的原因是什么？
使用了虚拟DOM操作，减少对真实DOM的操作.

3. 组件：

1.组件化思维：

组件化针对的是页面中的整个功能模块的划分。（好比在日常中的项目分工）

2.组件的概念：

组件是一个html, css, js, images等外链资源，这些部分组成一个聚合体。
如：bootstrap的使用

3.组件的优点：

代码的复用性比较高，便于维护
划分组件的原则： 复用率高，独立性强。