Vue核心 MVVM模型数据代理

1.6.MVVM 模型

在这里插入图片描述

MVVM模型

M：模型 Model，data中的数据
V：视图 View，模板代码
VM：视图模型 ViewModel，Vue实例

观察发现

data中所有的属性，最后都出现在了vm身上
vm身上所有的属性及Vue原型身上所有的属性，在Vue模板中都可以直接使用

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>理解MVVM</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- MVVM模型1.M: 模型Model，data中的数据2.V: 视图View，模板代码3.VM: 视图模型ViewModel，Vue实例观察发现1.data中所有的属性，最后都出现在了vm身上2.vm身上所有的属性及Vue原型身上所有的属性，在Vue模板中都可以直接使用--><!-- 准备好一个容器 --><div id="root"><h2>名称：{{ name }}</h2> <h2>战队：{{ rank }}</h2> <h2>测试：{{ $options }}</h2>	<!-- 视图VIEW --></div><script type="text/javascript">// 阻止vue在启动时生成生产提示Vue.config.productionTip = falsenew Vue({ el: '#root',  	  // 模型MODELdata:{ name: 'uzi',  // 视图模型VIEWMODELrank: 'RNG'},});</script>
</body>
</html>

在这里插入图片描述

1.7.Vue 中的数据代理

Object.defineproperty方法

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>回顾Object.defineProperty方法</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 准备好一个容器 --><div id="root"></div><script type="text/javascript">// 阻止vue在启动时生成生产提示let number = 18; let person = { name: '张三', sex: '男', };Object.defineProperty(person, 'age', {value:18,enumerable:true, 	// 控制属性是否可以枚举，默认值是falsewritable:true,   	// 控制属性是否可以被修改，默认值是falseconfigurable: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>

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>何为数据代理</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 数据代理: 通过一个对象代理对另一个对象中的属性的操作， (读/写) --><!-- 准备好一个容器 --><div id="root"></div><script type="text/javascript">let obj1 = { x: 100 }; let obj2 = { y: 200 };Object.defineProperty(obj2, 'x', { get() { return obj1.x }, set(value) { obj1.x = value } });</script>
</body>
</html>

Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
Vue中数据代理的好处：更加方便的操作data中的数据
基本原理
1. 通过object.defineProperty()把data对象中所有属性添加到vm上
2. 为每一个添加到vm上的属性，都指定一个 getter setter
3. 在getter setter内部去操作（读/写）data中对应的属性

在这里插入图片描述

Vue将data中的数据拷贝了一份到**_data属性中，又将_data里面的属性提到Vue实例中（如name），通过defineProperty实现数据代理，这样通过geter/setter操作 name，进而操作_data中的 name。而_data又对data**进行数据劫持，实现响应式

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>vue中的数据代理</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 1.Vue中的数据代理:通过vm对象来代理data对象中属性的操作（读/写）2.Vue中数据代理的好处：更加方便的操作data中的数据3.基本原理通过object.defineProperty()把data对象中所有属性添加到vm上为每一个添加到vm上的属性，都指定一个 getter setter在getter setter内部去操作（读/写）data中对应的属性--><!-- 准备好一个容器 --><div id="root"><h2>学校名称：{{ name }}</h2> <h2>学校地址：{{ address }}</h2></div><script type="text/javascript">// 阻止vue在启动时生成生产提示Vue.config.productionTip = falseconst vm = new Vue({ el: '#root',  	  data: { name: '天侠',address: '福建厦门'}});</script>
</body>
</html>