0

0

用vue框架有什么好处

青灯夜游

青灯夜游

发布时间:2022-12-02 20:28:58

|

14082人浏览过

|

来源于php中文网

原创

用vue的好处:1、Vue是组件化开发,减少代码的书写,使代码易于理解;2、可以对数据进行双向绑定;3、相比较传统的用超链接进行页面的切换与跳转,Vue使用的是路由,不用刷新页面;4、Vue是单页应用,加载时不用获取所有的数据和dom,提高加载速度,优化了用户体验;5、Vue的第三方组件库丰富,使用起来方便,提高了开发效率。

用vue框架有什么好处

本教程操作环境:windows7系统、vue3版,DELL G3电脑。

什么是Vue.js

Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用(SPA)提供驱动。

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

立即学习前端免费学习笔记(深入)”;

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时  ,Vue.js 也能驱动复杂的单页应用。

Vue.js的优点

  • 体积小:压缩后只有33k;

  • 更高的运行效率:基于虚拟DOM,一种可以预先通过JavaScript进行各种计算,把最终的DOM操作计算出来并优化的技术,由于这种DOM操作属于预处理操作,并没有真实的操作DOM,所以叫做虚拟DOM;【学习视频分享:vue视频教程web前端视频

  • 双向数据绑定:让开发者不用再去操作DOM对象,把更多的精力投入到业务逻辑上;

  • 生态丰富、学习成本低:市场上拥有大量成熟、稳定的基于vue.js的ui框架及组件,拿来即用实现快速开发;对初学者友好、入门容易、学习资料多;

其实抛开官方的一些不知所云的说法,简单来说,在传统web开发中,我们搭建项目都以html结构为基础,然后通过jquery或者js来添加各种特效功能,需要去选中每一个元素进行命令。

这些内容在简单的项目中或者不变的项目中还能应付得来,一旦项目改动或者项目工程较大,代码的修改将是复杂繁琐的。

而这时候用了vue,这些问题都不复存在。在比如一些单网页制作成的应用程序,一般涉及到数据交互的内容都很多,而应用了vue之后将大大缩减工作量。

vue在web开发,网站制作中有哪些显著优势?

1、数据绑定:vue会根据对应的元素,进行设置元素数据,通过输入框,以及get获取数据等多种方式进行数据的实时绑定,进行网页及应用的数据渲染 。

2、组件式开发:通过vue的模块封装,它可以将一个web开发中设计的各种模块进行拆分,变成单独的组件,然后通过数据绑定,调用对应模版组件,同时传入参数,即可完成对整个项目的开发。

使用vue有什么好处?

  • Vue是组件化开发,减少代码的书写,使代码易于理解。

  • 最突出的优势在于可以对数据进行双向绑定。

  • 相比较传统的用超链接进行页面的切换与跳转,Vue使用的是路由,不用刷新页面。

  • Vue是单页应用,加载时不用获取所有的数据和dom,提高加载速度,优化了用户体验。

  • Vue的第三方组件库丰富,使用起来方便,提高了开发效率。

1、响应式性能提升

1)diff方法优化

diff 算法是虚拟 DOM 技术的必然产物,它会对新旧 DOM 进行比较,然后将变化的 DOM 更新在真实的 DOM 上。使用vue,在创建虚拟 DOM 的时候,会根据 DOM 中的内容添加一个静态标记,在数据发生改变的时候,就会带着静态标记的节点去对比,能够快速找到变化的 DOM 。

2)事件侦听器缓存

默认情况下onClick会被视为动态绑定,所以每次都会追踪它的变化,但是因为是同一个函数,所以不用追踪变化,直接缓存起来复用即可。

骑士多商户企业版卡密寄售系统
骑士多商户企业版卡密寄售系统

企业版卡密寄售自动发货系统。前后端代码完全开源。 主要特性 技术栈:Webman + PHP8 + MYSQL8 + Vite +TypeScript + Vue3 + TDesign Starter 有详细的代码注释,有完整系统手册 Webman框架 使用最新的 Webman 框架开发 前端使用Vue CLI框架nodejs打包,页面加载更流畅,用户体验更好

下载

3)ssr渲染

当存在大量静态内容时,这些内容会被当做纯字符串推进一个 buffer 内,即使存在动态绑定,也会通过模板插值潜入进去,这样会比虚拟 DOM 渲染快得多。

2、代码体积减少

打包大小减少41%。

vue 移除了一些不常用的 API,如:inline-template、filter 等,使用 tree-shaking。

Tree Shaking 摇树优化,指的就是当我们引入一个模块的时候,不引入这个模块的所有代码,只引入我们需要的代码。

在vue 中,引入tree-shaking,所有的 API 都通过 ES6 模块化的方式引入,这样就能够让 webpack 或 rollup 等打包工具在打包时,就会自动对没有用到的 API 进行剔除,最小化 bundle 体积。

初次渲染快55%, 更新渲染快133%。组件选择了按需引入,使得打包后的体积也更小了,所以项目运行的时候速度更快,更顺畅了!

3、编译被优化

vue 使用静态提升后,对于不参与更新的元素,只会被创建一次,在渲染时直接复用就好了。

Fragment模板内不用再创建一个唯一根节点,可以直接放同级标签和内容。就相当于少了一个节点嵌套渲染。

4、组合式API

vue 新增了组合式 api ,更有利于维护和封装。一个功能模块代码会集中到一起,实现高内聚,低耦合。提高代码的可读性和可维护性,基于函数组合的 api 更好地重用逻辑代码。

5、更好的 ts 支持

vue 新增了 defineComponent 函数,使组件在 ts 下,更好的利用参数类型推断。如:reactive 和 ref 很具有代表性。

6、更先进的组件

  • vue 中可以不需要根节点,多个元素或标签可并列存在。

  • 可以把 teleport 中的内容添加到任意的节点内,对于嵌套较深的组件来说绝对是一个福音。

  • 允许程序在等待异步组件渲染一些后备的内容,可以让我们创建一个平滑的用户体验。

7、简单总结:

vue 目前是国内最火的前端框架之一,vue 性能提升、运行速度也比其他框架好很多。

总之 vue 就是:

  • 让项目更快

  • 让代码更少

  • 更易于维护

  • 让我们开发更快,加班更少

(学习视频分享:web前端开发编程基础视频

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
jquery插件有哪些
jquery插件有哪些

jquery插件有jQuery UI、jQuery Validate、jQuery DataTables、jQuery Slick、jQuery LazyLoad、jQuery Countdown、jQuery Lightbox、jQuery FullCalendar、jQuery Chosen和jQuery EasyUI等。本专题为大家提供jquery插件相关的文章、下载、课程内容,供大家免费下载体验。

150

2023.09.12

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

311

2023.10.13

jquery删除元素的方法
jquery删除元素的方法

jquery可以通过.remove() 方法、 .detach() 方法、.empty() 方法、.unwrap() 方法、.replaceWith() 方法、.html('') 方法和.hide() 方法来删除元素。更多关于jquery相关的问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

394

2023.11.10

jQuery hover()方法的使用
jQuery hover()方法的使用

hover()是jQuery中一个常用的方法,它用于绑定两个事件处理函数,这两个函数将在鼠标指针进入和离开匹配的元素时执行。想了解更多hover()的相关内容,可以阅读本专题下面的文章。

502

2023.12.04

jquery实现分页方法
jquery实现分页方法

在jQuery中实现分页可以使用插件或者自定义实现。想了解更多jquery分页的相关内容,可以阅读本专题下面的文章。

182

2023.12.06

jquery中隐藏元素是什么
jquery中隐藏元素是什么

jquery中隐藏元素是非常重要的一个概念,在使用jquery隐藏元素之前,需要先了解css样式中关于元素隐藏的属性,比如display、visibility、opacity等属性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

120

2024.02.23

jquery中什么是高亮显示
jquery中什么是高亮显示

jquery中高亮显示是指对页面搜索关键词时进行高亮显示,其实现办法:1、先获取要高亮显示的行,获取搜索的内容,再遍历整行内容,最后添加高亮颜色;2、使用“jquery highlight”高亮插件。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

176

2024.02.23

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

38

2026.01.13

Python 自然语言处理(NLP)基础与实战
Python 自然语言处理(NLP)基础与实战

本专题系统讲解 Python 在自然语言处理(NLP)领域的基础方法与实战应用,涵盖文本预处理(分词、去停用词)、词性标注、命名实体识别、关键词提取、情感分析,以及常用 NLP 库(NLTK、spaCy)的核心用法。通过真实文本案例,帮助学习者掌握 使用 Python 进行文本分析与语言数据处理的完整流程,适用于内容分析、舆情监测与智能文本应用场景。

10

2026.01.27

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号