前言
学习Vue的时候了解他应用到的MVVM模型与数据代理是不可缺少的一部分。什么是MVVM模型？什么是数据代理？MVVM模型与MVC模式有什么瓜葛？数据代理代理的是什么？
一、MVVM模型
在说MVVM模型之前先来聊一聊之前我们学习Java Web的时候常提到的一个MVC模型（MVC全称为：Model-View-Controller）
1.回顾MVC模型
这种模式用于应用程序的分层开发
Model（模型） - 模型代表一个存取数据的对象或 JAVA POJO。它也可以带有逻辑，在数据变化时更新控制器。
View（视图） - 视图代表模型包含的数据的可视化。
Controller（控制器） - 控制器作用于模型和视图上。它控制数据流向模型对象，并在数据变化时更新视图。它使视图与模型分离开。
就拿菜鸟教程中的例子举个例子：
MVC模型有以下优点：
- 各层代码各施其职，互不干涉 在MVC模式中，三个层各施其职，所以如果一旦哪一层的需求发生了变化，就只需要更改相应的层中的代码而不会影响到其它层中的代码。
- 有利于开发中的分工 在MVC模式中，由于按层把系统分开，那么就能更好的实现开发中的分工。 网页设计人员可以进行开发视图层中的JSP，对业务熟悉的开发人员可开发业务层，而其它开发人员可开发控制层。
- 有利于组件的重用 分层后更有利于组件的重用。 如控制层可独立成一个能用的组件，视图层也可做成通用的操作界面。
2.聊聊MVVM模型
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。
Vue代码在MVVM模型中的分工：
MVVM模型 M:模型(Model) data中的数据 V:视图(View) 模板代码 VM:视图模型（ViewModel）Vue实例 观察发现： 1.data中所有的属性，最后都出现在了Vue实例身上。 2.Vue实例身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
MVVM模型有以下优点：低耦合、可重用性、独立开发、可测试
3.测试代码
大家可以下载下图中的插件，观察vue实例并可以从控制台观察vue实例的属性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h1>学校名称：{{name}}</h1> <h1>学校地址：{{address}}</h1> <h1>测试一下1：{{1+1}}</h1> <h1>测试一下2：{{$options}}</h1> <h1>测试一下3：{{$emit}}</h1> <h1>测试一下4：{{_c}}</h1> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el: "#root", data: { name: "尚硅谷", address: "北京", }, }); console.log(vm); </script> </html>
结果：
数据代理
数据代理，顾名思义就是在一个数据上操作，可以影响到另一个数据，两个数据内容看成是同步的，但又不是完全一样的， 最应该保留的还是原来的那一份。只是因为有了代理 操作原来的数据方便了许多。 Vue中的代理是指使用vue实例对象身上的数据 代理vue实例对象属性内的data内的数据，在编译的时候代理会自动完成，自动生成getter、 setter方法。 在vm中_data就是代码中的data可以通过在外部定义data,然后引入vm中最后比较vm中的_data与外部data是否是一个对象进行检验 1.Vue中的数据代理： 通过vm对象来代理data对象中属性的操作（读/写） 2.Vue中数据代理的好处： 更加方便的操作data中的数据 3.基本原理： 通过Object.defineProperty()把data对象中所有属性添加到vm上。 为每一个添加到vm上的属性，都指定一个getter/setter。 在getter/setter内部去操作（读/写）data中对应的属性。
1.模拟一个数据代理
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>回顾Object.defineproperty方法</title> </head> <body> <script type="text/javascript" > let number = 18 let person = { name:'张三', sex:'男', } // 此时可以认为age就是number的代理 Object.defineProperty(person,'age',{ // value:18, // enumerable:true, //控制属性是否可以枚举，默认值是false // writable:true, //控制属性是否可以被修改，默认值是false // configurable:true //控制属性是否可以被删除，默认值是false //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值 get(){ console.log('有人读取age属性了') return number }, //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值 set(value){ console.log('有人修改了age属性，且值是',value) number = value } }) // console.log(Object.keys(person)) console.log(person) </script> </body> </html>
2.Vue中的数据代理模式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Vue中的数据代理</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器--> <div id="root"> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const mdata={ name:'尚硅谷', address:'宏福科技园' } const vm = new Vue({ el:'#root', data:mdata }) console.log("vm._data===mdata:",vm._data===mdata) </script> </html>
今天的分享到此结束吧！
