vue入门

1：我们为什么要使用vue

• 性能更好
• 试图、数据分离
• 维护陈本低

2:vue是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

3：vue的性能好在哪里

（1）什么会影响web应用的性能

操作DOM影响性能，因为操作DOM是十分昂贵的

（2）为什么操作DOM非常昂贵

A:JS和 DOM是两种东西，每次连接都需要消耗性能

B:操作DOM会导致重排和重绘

(3)JS与dom的关系

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

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

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

（4）DOM的位置和JavaScript的位置

在IE中，JavaScript的实现名为JScript，位于jscript.dll文件中，DOM的实现则存在另一个库中，名为mshtml.dll（内部称为trident）。

safari中的DOM和渲染是使用webkit中的webcore实现，JavaScript部分是由独立的SquirelFish引擎来实现。

google chrome使用webkit中的webCore库来渲染页面，但JavaScript引擎是他们自己研发的，名为V8。

firefox的JavaScript引擎名为TraceMonkey，与名为Gecko的渲染引擎相互独立。

(5)修改DOM元素的代价，则更为昂贵，因为它会导致浏览器重新计算页面的机会变化。

(6):浏览器的渲染过程

在下载完所有的html 、css、js、图片之后会依次发生

• 解析HTML，构建DOM树
• 解析CSS，生成CSS规则树
• 合并DOM树和CSS规则树，生成render树
• 布局render树，负责各元素尺寸、位置的计算
• 绘制render树，绘制页面像素信息
• 浏览器会将各层的信息发送给GPU，GPU将各层合成

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

什么时候触发重排

当页面布局和几何属性改变时就需要重排：

1. 添加或删除可见的DOM元素。

2. 元素位置改变

3. 元素尺寸改变( 外边距、内边距、边框厚度、宽度、高度等)

4. 内容改变，例：文本改变或图片被另一个不同尺寸的图片替代

5. 页面渲染器初始化

6. 浏览器窗口尺寸改变

vue的性能到底好在哪里

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

什么是虚拟dom

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

为什么要用JS来模拟dom结构？

再html\css\js中只有js做到判断、循环、递归、能够实现各种逻辑、实现各种算法