好程序员web前端分享MVVM框架Vue实现原理

Posted 2021-12-13 gcghcxy

　　好程序员web前端分享MVVM框架Vue实现原理，Vue.js是当下很火的一个javascript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js和react.js更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。

?

 

1.什么是MVVM呢？

MVVM的简写是Model-View-ViewModel。

　　在过去的10年里面，我们已经把很多传统的服务端代码放到了浏览器中，这样就产生了成千上万行的javascript代码，它们连接了html 和CSS文件，但缺乏正规的组织形式，这也就是为什么很多开发者使用框架。比如：angular.js、react.js、vue.js。有了这些框架之后，浏览器的兼容性问题已经不再是我们前端开发的阻碍。（这里应该有欢呼声，为什么要这么说，下次写浏览器兼容时再告诉你们）前端的项目体积不断的在加大，从一个简陋的小小的页面变成炫彩的页面需要成千上万的代码，这样导致了项目的可维护性和扩展性包括重要的安全性等成了最主要问题。

　　这也是为什么有很多很多的开发人员使用框架，框架简洁，有API。在当年那个时代为了解决浏览器兼容性问题，出现了很多类库，其中最典型的就是JQuery。但是这类库没有实现对业务逻辑的分成，所以维护性和扩展性极差。综上两方面原因，才有了MVVM模式一类框架的出现。比如说vue.js框架就是通过数据的双向绑定，极大了提高了开发效率。

1. MVVM框架

Vue就是基于MVVM模式实现的一套框架，在vue框架中：

Model:指的是js中的数据，如对象，数组等等。

View:指的是页面视图

viewModel:指的是vue实例化对象，

　　都说Vue.js是一个渐进式的javascript框架, 渐进式是什么意思？

1. 　　假如你已经有一个现成的服务端应用，你可以将vue 作为该应用的一部分加入其中，带来更好的交互体验;
2. 　　假如你想将更多的业务逻辑放到界面来实现，那么Vue可以满足你大部分的需求，（vue2.x+vue-router+axios+webpack）。和其它前端框架一样，VUE的优点在于可以很好的每一个功能、特效变成组件化，有更好的可维护性，也可以进行复用，每个组件都包含属于自己的HTML、CSS、JAVASCRIPT以用来渲染网页中相应的地方
3. 如果我们构建一个大型的应用，在这一点上，vue有一个命令行工具，使快速初始化一个真实的工程变得非常简单（vue init webpack my-project）。我们可以使用VUE的单文件组件，它包含了各自的html、JavaScript以及带作用域的css或scss。

以上这三个例子，是一步步递进的，也就是说对Vue.js的使用可大可小，它都会有相应的方式来整合到你的项目中。所以说它是一个渐进式的框架。Vue.js最独特的特性：当我们的数据变更时，Vue.js会帮你更新所有网页中用到它的地方。