MVVM

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。他也是用来开发web应用程序，他把应用程序分成三个部分

M: model 应用的核心（数据）
V: view 应用的界面
VM： viewmodel，视图模型。他是整个mvvm的核心，他是一个桥梁，连接M与V，能够做到数据变了、页面自动更新（vue）。

从上面描述可以看到很多vue的影子，vue就是基于此思想实现响应式数据模板的。学习MVVM重点也是学习VM。

VM的实现(ES5版本)

要实现VM，首先从其功能入手：VM作为桥梁，连接视图与模型，然后数据发生变化，页面自动更新。

实现思路：

监听数据发生变化（监听了数据的两个行为）
数据：也就是model对象
行为：model对象下属性的读取与修改
数据一旦发生变化，通知视图更新

VM的具体实现

监听数据发生变化需要使用到es5提供的一个古老的api：Object.defineProperty。

此api的意思是：定义对象的某一个属性，用于监听改属性的读取与修改。由于此api比较古老，所以使用的过程中会出现死循环等问题，解决方式比较固定。

整体的代码如下

// M
const model = {
    name: '张三',
    age: 20,
}

// VM: 视图模型，作为桥梁连接视图与模型， 数据变化页面自动更新。   

// 在没定义name之前保存一份副本
let _name = model.name
Object.defineProperty(model, 'name', {
    // 读取
    get() {
        return _name
    },
    // 修改
    set(newVal) {
        _name = newVal
        // 数据变了，通知视图更新
        render()
    }
})

// V
function 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是什么?MVVM详细介绍

MVVM

VM的实现(ES5版本)

VM的具体实现

vue2响应式数据的缺陷【重点】

vue2响应式数据修改的注意事项【重要】

VM的实现（es6版本）

Proxy的使用

具体实现

顾乔芝士网

持续更新的前后端开发技术栈

MVVM是什么?MVVM详细介绍

MVVM

VM的实现(ES5版本)

VM的具体实现

vue2响应式数据的缺陷【重点】

vue2响应式数据修改的注意事项 【重要】

VM的实现（es6版本）

Proxy的使用

具体实现

vue2响应式数据修改的注意事项【重要】