vue工作原理(vue基本原理)

Vue (读/Vju:/)、类似于View )是用于构建用户界面的渐进式框架,与其他大型框架相比,Vue被设计为可以自下而上分层应用在其他大型框架中,项目的技术方法往往从一开始就很必要,Vue更具灵活性。 开发者可以选择使用Vue开发新项目,也可以在现有项目中部署Vue。

另一方面,如果将Vue与现代化的工具链和各种支撑类库结合使用,则也能够应对复杂的单页面APP。 工具链是前端开发过程中使用的一组工具,例如使用立足工具创建APP、使用依赖关系管理工具安装依赖关系包或使用构建工具编译代码。

Vue的数据驱动通过mvvm(model-view-viewmodel )模式实现,其基本工作原理如下图所示。

VUE的工作原理:

由上图可见,MVVM主要由模型、视图和视图模型三部分组成。 Model是指数据部分,主要负责业务数据的View是指视图的部分,也就是DOM元素,负责处理视图。 ViewModel是连接视图和数据的数据模型,用于拦截模型或视图的更改。

MVVM无法直接与数据模型和视图视图进行通信。 视图模型ViewModel相当于观察者,监视双方的动作,及时通知进行适当的操作。 当Model发生变化时,ViewModel可以拦截该变化,并通知View适当的修改。 相反,当View发生变化时,ViewModel在拦截变化后,通知Model修改,解除视图和模型的相互连接。

目前市场上的三个主要前端框架分别是Angular、React和Vue。 Vue之所以受到开发者的欢迎,主要是因为Vue同时具有Angular和React框架的优点,以及Vue的代码简洁易用,在市场上也得到广泛应用。

这里简单说明一下Vue的特性。

1 .轻量级

Angular学习成本高,使用方便,但Vue比较简单直接,所以Vue更容易使用。

2 .数据绑定

Vue是一个MVVM框架,数据是双向绑定的。 这意味着,当数据发生变化时,视图也会发生变化,当视图发生变化时,数据也会同步发生变化。 这也是Vue的精髓。 Vue的双向数据绑定非常有用,特别是在表单处理方面。

3 .命令

命令主要包括内置命令和自定义命令,以“v-”开头,作用于HTML元素。 指令具有在将指令绑定到元素时向绑定元素添加特殊行为的特殊特性。 例如,v-bind动态绑定命令、v-if条件渲染命令和v- for列表渲染命令。

4 .插件

插件用于扩展Vue框架的功能,在MyPlugin.install中完成插件的创建,并可以轻松地配置和全局使用。 常用的扩展插件有vue-router、Vuex等。

Vue的很多特性与Angular和React有相同之处,但也有性能方面的不同。

Vue使用基于依赖项跟踪的监视系统,并使用异步队列进行更新。 所有数据均独立触发,提高数据处理能力。

React和Vue的中心思想是,它们都是组件,可以在组件之间嵌套。 React采用特殊的JSX语法,Vue也建议创建命名为*.vue后缀的文件格式,文件内容有若干规定,两者必须编译使用。

有趣的是,React依赖于虚拟DOM,而Vue使用DOM模板。 Vue为模板提供了命令、过滤器等,可以非常方便快捷地操作DOM。 为了确保用户体验,建议将Vue用于具有复杂交互逻辑的前端APP应用程序。

要学习Vue,请点击了解更多,获取免费教程哦。

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注