1.为什么使用VUE？

Vue （大家有什么问题或者我说的不对可以给我纠正，谢谢）

• 为什么要使用Vue?

  • 性能更好。

    • 什么会影响web应用性能？

    1. 操作dom影响性能，因为操作Dom是十分昂贵的。

    2. JS 和 Dom 是两种东西，每次连接都需要想好性能有句古话说宁可操作100js也不操作dom.

    3. 操作dom会导致重绘和重排。

    4. JS 和 DOM关系：

       DOM是一个独立于语言的，用于操作XML和HTML文档的程序接口（API）。在浏览器中主要用于与HTML文档打交道，并且使用DOM API用来访问文档中的数据。

       DOM是个与语言无关的API，他在浏览器中的接口却是用javascript来实现的。客户端脚本编程大多数都是在和底层文档打交道，DOM就成为现在JS编码中的重要部分。

       浏览器中通常会把DOM和javascript独立实现。

    5. 访问DOM元素：
       访问DOM元素是有代价的，修改DOM元素的代价，则更为昂贵，因为会导致浏览器重新计算页面的机会变化。

    6. 浏览器的渲染过程：
       浏览器下载完成页面中的所有组件:HTML, JavaScript, CSS, 图片后，会发生这样的过程。
       1. 解析HTML,构建DOM树。
       2. 解析CSS，生成CSS规格树。
       3. 合并DOM树和CSS规则树，生成render树。
       4. 布局render树，负责各元素尺寸，位置计算。
       5. 绘制render树，绘制页面像素信息。
       6. 浏览器会将各层的信息发送给GPU，GPU将各层合并。

       重排会执行浏览器渲染规则的1_{6,重绘会执行浏览器渲染规则的4}6

    7. 重绘和重排。

       当DOM的变化影响了元素的几何属性（宽高），浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分是想，重新构造渲染树，这个过程称之为重排，完成重排后，浏览器会重新绘制受影响的部分到屏幕中，该过程称之为重绘。

    8. 什么时候会触发重排？

       当页面和集合属性改变时就需要重排：
       1. 添加会删除可见的 DOM 元素。
       2. 元素位置改变。
       3. 元素尺寸改变（外边框，内边框，边框厚度，宽度，高度等）
       4. 内容改变，例如：文本改变或者图片被另一个不同尺寸的图片替代。
       5. 页面渲染器初始化。
       6. 浏览器窗口尺寸改变
       7. 各CSS属性对重绘重排的影响 https://csstriggers.com/。

    9. 触发重排的属性：
       offsetTop , offsetLeft , offsetWidth , offsetHeight , scrollTop , scrollLeft , scrollWidth , serollHeight , clientTop , clientLeft , clientWidth , clientHeight , getComputedStyle();不要问为什么获取元素的计算属性的时候会触发重排，因为为了给精确的数据，会重新渲染页面。

    • 为什么Vue的性能会更好？

      vue的核心就是虚拟dom，使用虚拟dom可以减少dom的操作，从而提升应用的性能。

      什么是虚拟dom? 所谓虚拟dom，即为伪dom，假的dom，他不是一个真实的dom，而是由JS来模拟出来的具有真实dom结构的一个树形结构。

      为什么要用JS来模拟DOM结构？
      Dom的操作是昂贵的，JS的运行效力更高，将DOM对象放在JS层，减少DOM操作，效率更高

  • 视图，数据分离

    只用关心数据的变化，处理数据就是处理数据，显示视图就是显示视图，分层来做，这样更符合思考的逻辑

  • 维护成本低

    VUE的代码量更少

    VUE的逻辑更清晰