vue是一款友好的、多用途的且高性能的js框架,一款构建用户界面的渐进式框架,它可以帮你创建可维护性和可测试性更强的代码库。

Vue 只关注视图层, 采用自底向上增量开发的设计。

官网对vue的优点描述是这样的:

1、易用:

学习曲线平缓,api简洁,容易上手。学习过程较react来说比较容易,不那么痛苦

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 object

它会在 对比 后再选择更新哪些DOM, 而不会像有些时候, 全部删除再重建.

获取/修改 大量DOM元素的时候,就会先在 虚拟DOM 里 取值 对比.

虚拟dom是在内存中维护的dom树,是在实体dom之上的一层抽象。有了这层抽象,不管是查询操作还是修改操作,都是先操作内存中的虚拟dom,在这个过程中可以做很多优化,从而减少对实体dom的操作。举两个例说明,1. 查询一个text标签的值,可以直接从虚拟dom中查找得到,根本不需要查询实体dom。2. 在一次操作中,要修改列表中的两条记录,要修改的元素会先把变更同步到虚拟dom上,然后根据最新的虚拟dom,一次性渲染出最终的实体dom,如果没有虚拟dom,两条记录的修改至少要对应两次对实体dom的操作,显然操作实体dom越频繁,网页速度越慢。

对于vue.js的Virtual DOM,目前业界有着褒贬不一的评价。有人认为Vue.js作为一个轻量级框架,引入Virtual DOM会加大Vue.js本身的代码尺寸,也会消耗更多CPU(手机上会更耗电)(注意:消耗更多的CPU并不意味着会更卡,因为JavaScript计算是后台计算,他的计算量还不至于让DOM操作变得卡顿),并且在操作单个DOM元素的时候,反而多了一道计算工序,会更慢。但也有人认为基本上会用Vue.js开发的都是页面中内容很多的元素,肯定操作的DOM量级普遍较大,平均一下还是比较划算的。

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

论坛(https://forum.vuejs.org/) - 提问答疑的最好地方。

Gitter(https://gitter.im/vuejs/vue) - 开发者聊天室。在这里你可以提问,不过最好在论坛提问,因为论坛有版块。

Github(https://github.com/vuejs) - 报告问题,提交请求,为你所做的任何贡献表示深深感谢!

vue组件库:

element-ui Mint UI

muse-ui

更多vue.js相关知识,可访问 Vue.js答疑 栏目!!

vue创建网页与html有什么区别,vue是什么?相关推荐

  1. vue组件挂载与html加载区别,vue中的挂载是什么意思?

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,方 ...

  2. vue ui网页创建项目失败

    vue ui网页创建项目失败出现"Cannot set property 'context' of null"错误 原因:vue-cli脚手架版本不正确 解决方法:我第一次安装的是 ...

  3. 从头开始vue创建项目_我正在以设计师的身份开始一个被动的收入项目。 从头开始。...

    从头开始vue创建项目 Do you ever read an article on Medium (or elsewhere) about passive income, side projects ...

  4. 七、Vue cli详解学习笔记——什么是Vue cli ,Vue cli的使用(安装,拉取2.x模板,初始化项目),Vue cli2详解,Runtime-Compiler和Runtime-only区别

    一.什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI. 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI 使用Vue.js开发大型应用时 ...

  5. html是一种用于创建网页的标准标记语言,html

    HTML.XML.XHTML 有什么区别? HTML是一种用于创建网页的国际通用的标准标记语言,用来展示数据:XML是一种标记语言,由相关人士自由决定的标记语言,即语言的可拓展性,设计用来传输及携带数 ...

  6. 【Django】(3)创建网页:学习笔记主页

    创建Django的过程通常为三个阶段:定义URL,编写视图和编写模板. 映射URL 当在浏览器中输入URL时,现在默认会返回默认的Django网站,现在需要将主页映射到项目"学习笔记&quo ...

  7. vue创建的挂钩中出错_建立自己的Vue 3 SWR挂钩

    vue创建的挂钩中出错 Version 3 is just around the corner and the composition API is bringing some new excitin ...

  8. vue实现网页端企业微信扫码登录功能(前端部分)

     时至今日,企业微信在企业日常工作中的使用越来越频繁也越来越重要,不少企业已使用企业微信进行着日常的工作安排管理.在这种背景下,各类系统和企业微信对接的需求也不断增加,今天要说的就是一个比较常见的需求 ...

  9. 网页和网站之间的区别

    The difference between webpage and website is unanimously erred in terms of their functionalities, a ...

最新文章

  1. Python3中的成员保护和访问限制
  2. python使用matplotlib可视化3D直方图(3D histogram、三维直方图、包含三个坐标轴x、y、z)、3D直方图可视化多个维度数据的区别和联系
  3. 家长会:我的发言稿,女儿的信
  4. pymysql.err.IntegrityError: (1062, Duplicate entry 'roxml-ROXML' for key 'PRIMARY')
  5. 【漫天烟花】绚烂烟花点亮夜空也太美了叭、某程序员携带烟花秀给大家拜年啦~
  6. Node.js模块之Buffer
  7. Oracle学习笔记:oracle服务在linux平台的启动问题
  8. Bootstrap 重置样式
  9. c语言中d1的分辨率是,C中的方法分辨率顺序
  10. 无线路由器视频监控方案
  11. (01)f103,4pin四脚的 oled(01)
  12. Cytoscape.js 学习
  13. ESP8266-Arduino编程实例-SHT40温湿度传感器驱动
  14. fxp连接失败_用FLASHFXP连接站点,总显示连接失败(连接丢失),该怎么办呢
  15. cv2.imread不能正常读取gif格式图片
  16. ALPS 2.3.0 安装教程
  17. 普通程序员如何转向人工智能方向?
  18. 职称计算机ppt,2017年职称计算机考试(PPT练习题大全)(3)
  19. 自定义控件--优酷menu
  20. EIGRP理论详解及基础实验

热门文章

  1. 简历面试择业篇-在面试的过程中你所需要注意的问题
  2. SpringMVC拦截器源码解析
  3. 5G将催动物联网成为新风口
  4. 20200516 hz 幻化成风【相等集合容斥,状态压缩】
  5. 最全的大学生自学资源都在这里了
  6. traceback.print_exc()的用法
  7. 珍宝鸭的力扣练习(3):位运算合集
  8. 正则表达式读取小说(txt文本)的章节
  9. 计算机技术在档案管理中的应用研究,计算机技术在档案管理中的应用研究
  10. 解除pdf禁止打印限制