3vue.js前端应用技术研究(1)

vue.js前端应用技术研究摘要:互联网与人们的关系越来越近，人们对万维网的要求越来越高。文件对象模型的现有操作需要复杂的选择器检测和JSON数据恢复步骤，整个开发过程很麻烦。所以，VUE基于MVVM体系结构模式的前端应用程序技术——Vue.js(构建用户界面的渐进式HYPERLINK"https://baike.sogou.com/lemma/ShowInnerLink.htm?lemmaId=143216894&ss_c=ssc.citiao.link"\t"https://baike.sogou.com/_blank"JavaScript框架)刚好出现。关键字:Vuejs；全球；万维网；前端MVVM体系；结构模式引言互联网技术的飞速发展，涌现了各式各样的软件，使得想学习软件开发或开发项目的开发人员无法从许多模型和框架中选择最佳语言。由于不断的更新和信息技术开发，软件开发越来越多样化。因此，要制作高质量的软件，必须对项目有明确的框架和逻辑结构。之前的软件开发项目混合了前端代码和后端代码，前端和后端开发没有明确的边界。因此，开发人员不仅需要掌握后端开发技术，还需要掌握非行业专用的前端开发原则，从而使开发人员繁重的工作影响软件的整体质量，提高测试和软件维护的强度。因此，开发人员通常希望将前端和后端开发分开，以使软件开发更具结构化。这样，为了提高开发者的用户体验率和工作效率，MVC、MVVM等各种前端架构相继登场，通过模块化程序减少前后接合的程度。在参考体系结构中，开发人员只对能够提高专有技术和整体软件质量的开发的一个方面负责。与MVC相比，MVVM具有低耦合、独立开发、可重用性和测试性的优点。本篇文章的目的主要介绍了基于虚拟DOM的双向数据绑定和组件开发的Vuejs框架的性能优势，以及相对于当前常用前端框架的独特优势。一.技术分析的背景和重要性科学技术的飞速发展是移动互联网迅猛发展的整个互联网行业的发展，除了移动智能设备的流行之外，还创建了许多全球通用网络应用程序。全世界的网络应用需要展示H5页的巨大效果，他们也需要展示精彩的信息，他们需要很多的交互性。如果遵循以往的开发模式，会有一些困难。因此，基于浏览器开发的前端技术进入了快速开发阶段，应用框架和应用工具的新创意不断涌现。作为前端开发框架，使用MVVM模式和基于组件的想法来组织代码。其轻量、易于掌握、高速的执行功能已被开发人员所认识。同时，Vue是构建用户界面的进步框架，设计为按层从下到上应用。核心库只专注于易于使用的视图层，可以轻松地与第三方库和现有项目集成。另一方面，如果将Vue与最新的工具链和各种支持类库结合使用，则还可以为复杂的单页面应用程序提供驱动程序。三．vue.js工作原理Vue.js(构建用户界面的分阶段JavaScript框架)是主要支持数据绑定和组件系统的重要功能。Vue核心响应原则进程将典型的Java脚本对象传递给Vue实例的数据选项，并且每个Vue实例都有一个监视实例对象。如果数据属性发生变化，监视程序将要求重新计算，并更新相关的组件。Vue异步执行文件对象模型的更新，只要观察到数据更改，Vue就会打开队列，并将所有数据更改放入同一事件周期的缓冲区中。如果同一监视程序被多次触发，则只会被推入队列一次，从而从缓冲区中删除重复数据，防止不必要的计算和文件对象模型操作。Vue的响应反映了数据的实际变化，并映射到数据源，从而避免了前端页面开发中文件对象模型选择器的复杂操作，简化了万维网的前端开发，降低了开发难度。Vue具有(1)灵活、开放的特性(2)有更成熟的工具、学习和易用性所支持(3)良好的性能和优化(4)有强大的路由机制(5)实现过渡效果的方法有多种。2.1数据绑定单向数据绑定和双向数据绑定有区别。双向数据绑定向输入元素(输入、文本等)添加更改(输入)事件，以动态更改模型和视图。目前，大多数前端框架都有三种方法:发布器-订户模式、脏值检查和数据劫持。Vue通过Object.defineProperty()锁定各个特征的决定因素和getter在数据发生更改时向订户发送消息，并触发其监视回调。在之前的模式下，使用Ajax请求从模型请求数据，手动触发文件对象模型，然后将其传输到数据修改页面Vue提供了在模型中的数据发生更改时更改文件对象模型的内部指令。同时，可以监视视图、更改模型和双向绑定数据。2.2组件系统Vue组件系统实现扩展的HTML元素，封装可用的代码。页面上的独立可视区域和交互式区域分别被视为组件。每个组件都位于项目目录中，并且组件所需的所有类型的资源都保持在这种绿色下。页面只是组件的容器，可以自由嵌套和组合组件以组织整个页面。组件系统的完整内容如下:1.创建和注册组件，并在初始化根实例之前验证组件是否已注册。2.props可以传输数据，父组件可以通过小道具将数据传输到子组件。3.上级装置和次级装置可以实现信息沟通，次级装置可以联系或将信息反馈给上级装置。4.组件之间可以设置同样的放置点，保证它们之间的轮换。如果将交换机组件保留在内存中，则可以防止该组件再次保持状态或进行渲染，可以添加保持实时命令参数。三．vue比较不同的框架。3.1与React对比相似之处:反应采用特殊的JSX语法，也提倡写Vue.js。在组件开发中，具有某些文件内容规则的Vue特殊文件类型在编译后必须同时使用。组件实例可以进行组合。两者都提供了合理的钩子函数，使开发人员能够以定制的方式处理需求。没有任何一个具有内置功能(如AjaxAJAX)，但加载了插件，混合在零件开发中得到支持。不同之处:反应取决于Vue的虚拟文件对象模型.js文件对象模型。React采用的虚拟文件对象模型将脏渲染结果。Vue.js模板提供了指示和过滤器等，文件对象模型的操作非常方便和快速。3.2与AngularJS对比相似之处:支持所有命令:内置和自定义命令。支持的过滤器:拥有内置和自定义两种模式，两者都兼容双向数据绑定且不兼容低端浏览器。区别:1.AngularJS增加依赖性注入，但Vue.js本身比较简单直观。2.在性能方面，因为AngularJS依赖于检查数据的脏检查，所以观察者越多，检查速度就越慢。基于跟踪Vue.js依赖关系的观测值和异步队列更新。所有数据均单独触发。在大型应用中，这种优化的差异非常明显。结语：Vue的本质作用是将应用编程接口的数据进行绑定以及可以及时做出动态反应，其效率高，使用方便对于新手十分友好。参考文献：[1]刘金羽.基于Vue.js的前端教学软件设计与实现[J].电脑编程技巧与维护,2020(02):23-24+29.[2]沈剑翘,陈泽椿.Vue.js在构建系统前端SPA的应用[J].科技创新与应用,2020(03):181-182.[3]陈岩.轻量级响应式框架Vue.js应用分析[J].中国管理信息化,2018,21(03):181-183.