MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。他也是用来开发web应用程序，他把应用程序分成三个部分
M: model 应用的核心（数据）V: view 应用的界面VM： viewmodel，视图模型。他是整个mvvm的核心，他是一个桥梁，连接M与V，能够做到数据变了、页面自动更新（vue）。从上面描述可以看到很多vue的影子，vue就是基于此思想实现响应式数据模板的。学习MVVM重点也是学习VM。
要实现VM，首先从其功能入手：VM作为桥梁，连接视图与模型，然后数据发生变化，页面自动更新。
实现思路：
监听数据发生变化（监听了数据的两个行为）数据：也就是model对象行为：model对象下属性的读取与修改数据一旦发生变化，通知视图更新VM的具体实现监听数据发生变化需要使用到es5提供的一个古老的api：Object.defineProperty。
此api的意思是：定义对象的某一个属性，用于监听改属性的读取与修改。 由于此api比较古老，所以使用的过程中会出现死循环等问题，解决方式比较固定。
整体的代码如下
// Mconst model = { name: '张三', age: 20,}// VM: 视图模型，作为桥梁连接视图与模型， 数据变化页面自动更新。 // 在没定义name之前保存一份副本let _name = model.nameObject.defineProperty(model, 'name', { // 读取 get() { return _name }, // 修改 set(newVal) { _name = newVal // 数据变了，通知视图更新 render() }})// Vfunction render() { app.innerHTML = ` <span>${model.name}</span> <button onclick="changeName()">改名</button> `}render()function changeName() { model.name = '李四'}vue2响应式数据的缺陷【重点】
由于vue底层是响应式模块是通过Object.defineProperty此api取实现，所以带来了一些问题，问题如下：
Object.defineProperty一次只能监听一个属性，对于对象新增的属性，vue2没法监听到，除非使用set方法，详情见一节vue2会深度遍历data下的对象，重写每一个属性的getter、setter，即使这个属性最终不再页面上使用。造成性能你浪费！vue2响应式数据修改的注意事项 【重要】有些情况下，数据发生变化，页面也不会更新。官方说明：https://v2.cn.vuejs.org/v2/guide/reactivity.html
对于对象：新增属性与删除属性监听不到，使用set（给vue的对象添加一个响应式的属性）可以解决，语法如下：this.$set(对象， 属性名, 值)对于数组通过索引直接修改这一整项, 解决方式： this.$set(数组， 索引, 值)为什么不能通过索引修改数组：数组的长度不固定，也许会上百上千，开销就非常大，所以vue根本没有重写数组索引的get和set.r如果你要自己重写，代码如下，看一参考着理解```js // 你可以把数组的索引看成对象的键名， 数组的值，看成键值。 也就是arr看成arrObj这个形式 let arr = ['a', 'b', 'c'] let arrObj = { 0: 'a', 1: 'b', 2: 'c' } // 重写索引. 如果数组很长，会很消耗性能 for(let i in arr) { Object.defineProperty(arr, i, { get(){}, set(){} }) } ```
改变数组的长度，也不行搭建一个cnd的vue2开发环境进行测试
<!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></head><body> <div id="app"> <!-- 使用vue的指令 使用vue的数据 --> {{ user }} <button @click="changeName">改名</button> <div> {{ arr }} <button @click="changeArr">改arr</button> </div> <div> {{ arrObj }} <button @click="changeArrObj">改变数组对象中的某一项</button> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { user: { name: '张三', age: 24, }, arr: ['张三', '李四', '王五'], arrObj: [ {name: 'xxx1', age: 24}, {name: 'xxx2', age: 25}, {name: 'xxx3', age: 26}, ] }, methods: { changeArrObj() { console.log(this.arrObj) // 通过索引改了数组 this.arrObj[0] = '坤坤' }, changeName() { // this.user.name = '李四' // 新增的属性没有getter、setter，所以不是一个响应式数据，所以sex怎么变，页面都不会更新 // this.user.sex = '男' // Vue.set: 构造函数.方法 ---》 静态方法 // this.$set 实例.方法 ----》 原型上的方法 // 给 user这个对象新增一个响应式的属性sex，初始值为男 this.$set( this.user, 'sex', '男' ) console.log(this.user) }, // 改变数组 changeArr() { // 讲数组的第一项换成老王 this.$set(this.arr, 0, '老王') // this.arr[0] = '老王' // console.log(this.arr) }, }, // vue，初始化完数据（使用Object.defineProperty来监听每一个属性） created() { console.log(this.user) }, mounted() { console.log('mounted') } }) </script></body></html>VM的实现（es6版本）Proxy的使用
proxy的特点：1. 格局大，代理整个对象。 2. 功能也强大： 能够代理13种行为。3.语法比defineProperty简单了很多。
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截。从这个描述来看，Proxy天然的适合做VM这一层代理。其基本语法如下：
// 要被代理的对象const model = { name: '张三'}// 代理对象（new出来的proxy）const proxy = new Proxy(model, { // 监听到操作 get(target, key) { return target[key] }, set(target, key, newVal) { // 设置值 target[key] = newVal }})// 操作（通过代理对象去操作） // 进行修改proxy.name = '李四'// 进行读取proxy.get具体实现
<div id="app"></div> <script> // M const model = { name: '张三', age: 24 } // VM let proxy = new Proxy(model, { get(target, key) { return target[key] }, set(target, key, newVal) { // 改变数据 target[key] = newVal // 通知视图更新 render() } }) // V function render() { app.innerHTML = ` ${proxy.name} - ${proxy.age} <button onclick="changeName()">改变</button> <button onclick="changeAge()">改变年龄</button> ` } render() function changeName() { // 改数据 proxy.name = '李四' } function changeAge() { proxy.age = 40 } </script>
可以发现使用proxy之后，代码更加简单，对于新增删除属性都能监听到。
标签： mvvm
