vue

为什么要用vue

传统的网页形式是浏览器脚本语言js连接了各种各样的Html，css，但缺乏正规的组织形式，比如在页面元素非常多，结构很庞大的网页中，数据和视图如果全部混杂在一起，像传统开发一样全部混合在HTML中，那么要对它们进行处理会十分的费劲，并且如果其中有几个结构之间存在藕断丝连的关系，那么会导致代码上出现更大的问题，比如juqery中使用的$('#xxx').parent().parent().parent()

一开始很容易找到，但是当页面结构改变时，也就是说，DOM关联和嵌套级别将改变，那么先前的代码可能会变成这样：

$('#xxx').parent().parent().parent().parent().parent()

产品迭代后，dom节点的搜索操作会造成很大的性能损失。

Vue是一个友好，和高性能的js框架，可以帮助您创建更可维护和可测试的代码库。官方网站描述了Vue的优点，如下所示：

1.易于使用：

学习曲线平缓，API简单易用。学习过程比做出反应容易，但没有那么痛苦

2.灵活：

如果您已经有了现成的服务器端框架，则可以将vue嵌入其中，以带来更丰富的交互式系统，或者您想在前端实现更多业务逻辑，则将其核心vue图书馆及其生态系统也可以满足您的各种需求。 Vue允许您将网页分为可重用的组件。每个组件可以包含自己的html，css，js文件来呈现相应的网页。本地的。

3.高效：

虚拟dom：所有数据都在内存中，只有js引擎参与其中

真实的dom将在其中包含浏览器呈现层

您知道浏览器的虚拟DOM与实际DOM之间的区别(注意：虚拟DOM的需求实际上与框架的DOM操作机制有关)：

虚拟DOM将不执行排版和重绘操作

经常对虚拟DOM进行修改，然后一次比较并修改真实DOM中需要修改的部分(请注意！)，最后在真实DOM中进行排版和重绘以减少布局的损失并重新绘制过多的DOM节点

频繁排版和重绘真实DOM的效率很低

虚拟DOM有效地减少了大区域(真实DOM节点)的重绘和排版，因为最终的差异与真实DOM进行了比较，并且只能呈现其中的一部分(与2)相同

使用虚拟DOM损失计算：

总损失=虚拟DOM添加，删除和修改+(与Diff算法的效率有关)实际DOM差异添加，删除和修改+(较少的节点)排版和重绘

直接使用真实的DOM损失计算：

总损失=完全添加，删除和修改了真正的DOM +(可能有更多的节点)排版和重绘。只能说虚拟DOM在某些情况下只会减少对真实DOM的操作次数。

虚拟DOM只是一个JavaScript对象

它将在比较之后选择要更新的DOM，而不是在某些情况下删除所有DOM并进行重建。

在获取/修改大量DOM元素时，它将首先比较虚拟DOM中的值。

虚拟dom是在内存中维护的dom树，它是物理dom之上的抽象层。在此抽象级别上，无论是查询操作还是修改操作，都将首先操作内存中的虚拟dom。在此过程中，可以进行许多优化以减少实体dom的操作。举两个例子，1.查询文本标签的值，可以直接从虚拟dom中找到它，而根本不查询实体dom。 2.在一项操作中，要修改列表中的两个记录，要修改的元素将首先将更改同步到虚拟dom，然后基于最新的虚拟dom一次渲染最终的物理dom。如果没有虚拟dom，则对两个记录的修改必须对应于对实体dom的至少两个操作。显然，实体dom操作越频繁，网页速度就越慢。

关于vue.js的虚拟DOM，目前在业界有不同的评论。有人认为Vue.js是一个轻量级的框架。虚拟DOM的引入将增加Vue.js本身的代码大小，并且还将消耗更多的CPU(手机上的更多功率)(注意：更多的CPU消耗不会增加它的消耗，这意味着它会更困难，因为JavaScript计算是后台计算，并且其计算不足以使DOM操作变得滞后)，并且当操作单个DOM元素时，还有一个额外的计算过程，该过程会更慢。但是有人认为，基本上将使用Vue.js开发的元素是页面中的许多元素，并且必须操作的DOM通常规模很大，并且平均而言更具成本效益。

4.丰富的社区和第三方组件库

社区

论坛()-提问的最佳场所。

Gitter()-开发人员。您可以在这里提问，但是最好在论坛中提问，因为该论坛有多个部分。

Github()-报告问题，提交请求，并感谢您的贡献！

vue组件库：

element-ui薄荷UI

muse-ui

什么是vue

1. Vue.js(发音为/vjuː/，类似于view)是用于构建用户界面的渐进框架。

这里的渐进式框架也是上述Vue的灵活功能之一。使用Vue，您可以使用它在原始大型系统之上实现一个或两个组件，并将其用作jQuery。您也可以将其用于整个家庭。使用Angular时的存储桶开发；

例如，在开始使用数据绑定来形成表单时，然后控制整个页面的dom，然后使用路由器控制单页面应用程序的路由，组件协调，vuex和数据协调等使用vue，您可以使用原始版本。在大型系统的顶部，可以代替实现一个或两个组件，并将它们用作jQuery；您还可以将其作为整个系列的存储桶用于Angular开发。

2. Vue仅关注视图层，并采用了自下而上的增量开发设计。

查看图层：

HTML中的DOM实际上是视图。网页通过DOM的组合和嵌套形成最基本的视图结构，然后通过CSS的修改，基本的视图结构是“组成”，使它们看起来更漂亮。最后，涉及到交互部分，您需要使用JavaScript来接受用户交互请求，并通过事件机制响应用户交互，并在事件处理功能中修改各种数据，例如修改DOM，innerHTML或innerText。部分。

我们可以将HTML中的DOM与其他部分分开，将其划分为一个级别，该级别称为视图层。

MVVM

是Model-View-ViewModel的缩写，由三部分组成：Model，View和ViewModel。模型层代表数据模型，也可以在模型中定义数据修改和操作的业务逻辑；视图表示UI组件，负责将数据模型转换为UI并显示。 ViewModel是一个用于同步View和Model的对象。它是基于前端开发的体系结构模型。其核心是提供与View和ViewModel的双向数据绑定，这使ViewModel的状态更改能够自动传输到View，即所谓的双向数据绑定。

Vue.js是一个Javascript库，提供了MVVM风格的双向数据绑定，重点是View层。它的核心是MVVM中的VM，即ViewModel。 ViewModel负责连接View和Model以确保视图和数据的一致性。这种轻量级的体系结构使前端开发更加高效和便捷。

MVC

控制器负责更新模型中的数据，视图从模型中请求数据；当用户的行为触发操作时，控制器将更新模型并通知视图更新，这时视图将向模型报告请求新数据

3. Vue的目标是通过最简单的API实现响应数据绑定和组合视图组件。

响应的数据绑定：

这意味着vue.js将自动响应数据更改，并根据用户事先在代码中编写的绑定关系来修改绑定在一起的所有数据和查看内容。这种绑定关系是通过输入标签的v-model属性在图上声明的，因此您可能还会看到人们粗略地将vue.js称为模板引擎，用于在其他地方进行声明式渲染。

vue.js测试 -

var app = new Vue({

el: '#app',

data: {

message: 'Hello Vue!'

}

})

组合视图组件：

Vue.js使用组件将单页应用程序中的各个模块拆分为一个组件(组件)，我们只需要在父应用程序中编写各种组件标签(占坑)，然后编写要传递到组件标签中组件的参数(就像将参数传递给函数一样，此参数称为组件的属性)，然后编写各种组件的实现(填充孔)。

组件可以自由组合以形成功能齐全的接口。当不需要组件或要替换组件时，可以随时替换和删除它，而不会影响整个应用程序的操作(组件化)

组件化的优势：

提高开发效率

易于重用

简化调试步骤

提高整个项目的可维护性

易于协作开发

本文来自电脑杂谈，转载请注明本文网址：

http://www.pc-fly.com/a/shumachanpin/article-344717-1.html