关于Vue的介绍

举报
Java李杨勇 发表于 2022/07/31 11:08:17 2022/07/31
【摘要】 Vue是用于构建前端页面的一套相当好用的渐进式JavaScript框架,与其他传统的此类型框架不同的是,Vue的渐进式框架允许开发者能够从相对简单组件开始写起,逐渐建成一个复杂的前端平台。Vue作为渐进式的框架,它的四大核心概念分别为组件化、MVVM、响应式和生命周期。首先,组件(Component)是Vue中最强大的功能之一。通过组件,Vue可以实现扩展 HTML 元素,封装可重用的代码的...

Vue是用于构建前端页面的一套相当好用的渐进式JavaScript框架,与其他传统的此类型框架不同的是,Vue的渐进式框架允许开发者能够从相对简单组件开始写起,逐渐建成一个复杂的前端平台。Vue作为渐进式的框架,它的四大核心概念分别为组件化、MVVM、响应式和生命周期。

首先,组件(Component)是Vue中最强大的功能之一。通过组件,Vue可以实现扩展 HTML 元素,封装可重用的代码的相关操作。更近一层,组件也可以成为自定义元素, Vue的编译器为其加入特定功能。在某些情况下,组件也可通过原生 HTML元素的形式,以is的特性进行扩展。组件机制的设计,可以让开发者把一个复杂的应用分割成一个个功能独立组件,降低开发的难度的同时,也提供了极好的复用性和可维护性。组件的存在,就是为了让单个Vue模块的代码尽可能变得简洁易懂,能够让我们通过不同的组件,来划分不同的功能模块,将来我们就可以通过调用对应的组件来实现相应的功能。

其次,MVVM全称为Model-View-ViewModel,其中View为视图层,ViewModel为业务逻辑层,Model为数据层。MVVM源自于经典的MVCModel-View-Controller)模式。MVVM设计区别于传统MVC模式核心功能的实现是靠着ViewModel层特殊的设计实现的,它通过转换Model中的数据对象来让数据变得更容易管理和使用,同时ViewModel层会与View层的数据进行双向绑定。当用户的操作使得View层数据发生变化时,变化会自动同步到ViewModel处理相应逻辑,并将变化更新到Model数据库。反之,当服务端数据发生变化,变化会自动同步到ViewModel处理相应逻辑,并将变化同步到View展现给用户。在Vue使用MVVM设计之前,完成HTMLJS之间的交互需要使用大量的DOM操作来实现动态加载。而现在MVVM的数据双向绑定减少了DOM操作,更高效地实现了视图和数据的交互。

然后,响应式是Vue 最独特的特性之一,可以说是虚拟DOM。在Vue中,每个绑定data属性的组件都有一个Watcher检测data属性的变化,一旦检测到改变,则重新渲染该组件。对于DOM来说,当HTML的一个元素需要响应数据更改时,会刷新整个页面,导致效率堪忧。但对于虚拟DOM来说,浏览器会将HTML文件转换为JS文件并复制一个额外使用(虚拟)。对于任何更改,虚拟DOM都将复制的JS与原始JS进行比较,只重新加载更改的部分,局部修改到真实DOM上。这样的操作避免了了大量DOM操作可能会导致的系统效率降低问题,同时使得系统渲染更加只能与快捷。

最后,Vue生命周期指的是vue实例的对象从创建之初到销毁的整个过程,vue所有功能的实现都是围绕其生命周期展开的,在生命周期的各个阶段调用不同的钩子函数可以实现对组件数据的管理以及进行DOM渲染两个重要的功能。vue的生命周期总共分为八个阶段,分别是:beforeCreate(创建前)、created(创建后)、beforeMount(载入前)mounted(载入后)、beforeUpdate(更新前)、updated(更新后)、beforeDestroy(销毁前)、destroyed(销毁后)。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200