前言
学习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>
今天的分享到此结束吧！
本文含有隐藏内容，请 开通VIP 后查看