一、MVVM
M(Model): 对应data中的数据
V(View): 也就是模板(template)
VM(ViewModel): 对应Vue实例对象
大多数的前端框架都或多或少借鉴了MVVM模型，其中VM可以看做是View与Model中间的桥梁，它协助页面(View)和数据(Model)的展示。
二、数据代理
1.了解Object.defineProperty()
这是 js 中Object对象中用于设定对象属性的一个方法，可以动态的添加、修改、删除某个对象中的属性。在学习数据代理前需要先了解该方法。
下面的例子为一个对象添加了一个属性:
<!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>数据代理</title>
<!-- 下载到本地引用 -->
<script type="text/javascript" src="./js/vue2.js"></script>
</head>
<body>
<div id="root">
</div>
<script type="text/javascript">
// 一个对象
let people = {
name: '张三',
gender: '男'
};
// 参数分别为 要修改的对象、要修改的属性、具体的操作
// 为people添加一个 ‘age’ 属性
Object.defineProperty(people, 'age',{
value: 18, //设定属性的值
enumerable: true, // 是否可被枚举(如果为false则使用Object.keys()就获取不到这个属性)
writable: true, // 是否可被修改
configurable: true // 是否可被删除
});
</script>
</body>
</html>
其中enumerable、writable、configurable是最基本且常用的，三者默认的属性都是false
上述只是静态的定义对象属性的值，使用**get()函数(getter)和set()函数(setter)**可以动态的定义对象属性的值
2.认识getter与setter
<!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>数据代理</title>
<!-- 下载到本地引用 -->
<script type="text/javascript" src="./js/vue2.js"></script>
</head>
<body>
<div id="root">
</div>
<script type="text/javascript">
let number = 0;
// 一个对象
let people = {
name: '张三',
gender: '男'
};
// 参数分别为 要修改的对象、要修改的属性、具体的操作
// 为people添加一个 ‘age’ 属性
Object.defineProperty(people, 'age',{
enumerable: true, // 是否可被枚举(如果为false则使用Object.keys()就获取不到这个属性)
configurable: true, // 是否可被删除
// 当有人访问这个属性时便会被调用
get(){
// 将age属性与number绑定 每次读取age属性值时就会返回number的值
return number;
},
// 当有人修改属性age时会被调用
set(v){
// 调用的时候如果想要真的修改属性的值需要修改number1的值
number = v;
}
});
</script>
</body>
</html>
需要注意的是get与set函数不能与value和writeable属性同时出现！！
三、数据代理
所谓数据代理其实就是用一个对象中的数据去对另一个对象中的属性进行相关操作，包括读和写。
<!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>数据代理</title>
<!-- 下载到本地引用 -->
<script type="text/javascript" src="./js/vue2.js"></script>
</head>
<body>
<div id="root">
</div>
<script type="text/javascript">
// 两个对象
let Obj1 = {a: 10};
let Obj2 = {b: 20};
Object.defineProperty(Obj2, 'a',{
// 读取Obj2的属性a会返回Obj1中a的值
get(){
return Obj1.a;
},
// 修改Obj2的属性a会修改Obj1中a的值
set(v){
Obj1.a = v;
}
});
</script>
</body>
</html>
四、vue中的数据代理
了解了Object.defineProperty()方法就能更好的理解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>数据代理</title>
<!-- 下载到本地引用 -->
<script type="text/javascript" src="./js/vue2.js"></script>
</head>
<body>
<div id="root">
<p>{{name}}</p>
<p>{{age}}</p>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
// vue其实就是使用了Object.defineProperty()方法对data中的对象进行了代理
// 这就使得原本需要{{_data.name}}才能使用的数据现在直接使用{{name}}就能直接使用
data(){
return{
name: '张三',
age: 18
}
}
});
</script>
</body>
</html>
