浅谈vue原理(一) / 开普饭

　　哎，不知道多久之前说的要说说vue原理的，后来就忘记了，嘿嘿，这次就来看看vue的大概原理吧！

　　看过我博客的人应该知道，我不是很喜欢用那种太专业的术语的，喜欢用小白都能看懂的话来说，所以可能有的地方表达的不是很专业，不要打我╮(╯_╰)╭

　　前提：起码要简单使用过vue，知道怎么用

1.vue的作用　　

　　首先，我们知道有一个东西叫做mvvm，不懂这个没关系，其实就是简称双向数据绑定，可以拆成三部分，m(model)，v(view)，vm(viewmodel)；

　　想一想，假如我们要把html标签中的数据和js中的数据相互产生联系，一般会怎么做？传统的做法就是获取dom节点，然后向其中设置新的值覆盖旧的值就行了，类似下面这样的：

　　但是每次都要去获取这个dom节点真的很烦，当html标签很多的时候看找这个节点的选择器都看花了眼，想偷个懒怎么办？最好是在<script>标签中写js代码的地方，有个变量和html标签中的变量是一个共同体，只要修改了其中一个另外一个就会发生变化；

　　那么现在的问题就是，怎么将那个变量和html标签中的变量建立联系呢？俗话说得好，解决不了两个对象之间的关系，那就建立一个中间层就好了，如果建立一个还解决不了，那就再建立一个中间层！

　　所以这里，我们就需要建立一个中间层来维持js中变量和html中变量的关系，下图所示，那个vue.js文件就是中间层；

　　用专业一点的图就是这样的，下图所示；

　　现在应该大概懂了啥叫做mvvm了吧！然后我们只需要再深入一下从view->model，然后反着model->view的绑定过程就ok了；两个方向都要看看嘛，所以就叫做双向绑定啊！

2.Object.defineProperty()

　　第一次看到这个方法肯定比较懵逼，这方法干嘛的啊？

　　我们可以看看这样的一个场景，一个对象let a = { name: 0 },如果我要给这个对象的那么属性修改应该怎么做？我的话，肯定在想，尼玛谁的name居然是0啊肯定写错了，我上去就是一个滑铲就写了a.name = "小王"；(牛批！鼓掌╮(╯_╰)╭)

　　那么有没有想过a.name="小王"这到底是怎么调用的啊？为啥一个点然后加个属性名就可以给这个对象增加一个属性啊？

　　我找了一下，有兴趣的可以参考这个老哥的博客，用一句话来说明就是在你声明一个对象的时候，js会偷偷的给这个对象添加一个set和get方法，然后这个方法还不让你看到，只是会在你去a.name的时候会判断后面有没有赋值语句，有的话就调用set方法，没有的话就调用get方法；

　　如果有小伙伴学过其他的面向对象的语言的，比如java，应该知道这种get/set方法肯定是我们需要自己生成的，能够实际看得到；

　　那么现在又来一个奇葩的场景，在使用a.name="小王"的时候，同时还要打印这样一句话：“呵呵，现在是在修改值哦๑乛◡乛๑”；

　　第一种方式，我们可以这样做，手动的去修改a对象去覆盖自带的set方法：

let a = {
      // 加了下划线可以当作私有属性啊(当然，这个不是真正的私有属性啊，有兴趣的可以看看这个博客真正私有属性的实现https://www.cnblogs.com/Mr-O-o-Lee/p/13781362.html)
      _name: 0,
      // 覆盖自带的set方法
      set name(val) {
        console.log('呵呵，现在是在修改值哦๑乛◡乛๑');
        this._name = val;
      }
    }
    a.name = "小王";

　　一番波折我们也是完成了，不错不错！但是有没有考虑一个问题，如果这个对象是别人写的呢？你去把别人写的东西给改了......。那么我们有没有什么方法在不修改代码的情况下实现上面的功能呢？

　　第二种方法：我们可以使用Object.defineProperty()，我们把上面代码这样修改一下，也是可以的（同理，也可以添加get方法，自己试试；）

let a = {
      _name: 0,
    }
    // 在不改变对象的前提下添加功能
    Object.defineProperty(a, 'name', {
      configurable: true,
      set: (val)=>{
        console.log('呵呵，现在是在修改值哦๑乛◡乛๑');
        _name = val;
      }
    })
    a.name = "小王";

　　瞎比比了大半天，终于快把Object.defineProperty()说完了，上面代码中有configurable表示描述属性是否配置，以及可否删除，还有enumerable表示该属性是否能被for in 或者 Object.keys()遍历到；当然还有其他的属性自行了解；

　　而vue中就是使用到了Object.defineProperty()，在上面的例子中可以看到，我们可以给一个对象的属性添加get/set方法，在修改属性值的时候，调用set方法中拿到新的值的同时还可以做自定义处理的，专业说法叫做数据劫持。

3.数据代理

　　一句话解释清楚什么叫做数据代理：就是将data中的所有数据的地址丢到vue实例中一份，以便于我们可以直接使用vue.xxx去获取属性值vue.data.xxx，伪代码如下：

上面这个图中，假如我们这样写myVue.message="world"，实际上调用的是myVue.data.message="world",所以就会触发message属性的数据劫持，调用set方法！

4.手动实现的代码

html部分：

<body>
  <div id="app">
    <h1>{{message}}</h1>
  </div>

  <script src="./mvvm.js"></script>
  <script>
    //1.myVue中不能在data中新增不存在的属性，例如，不能在初始化之后还使用myVue.data.name="小王"，变成了下面这样，此时的name没有经过数据劫持
    //2.对于data中属性值的获取或者修改都会触发数据劫持，也就是在初始化的过程中会给的所有属性添加get/set方法

    // 自定义的myVue实例
    let myVue = new MyVue({
      el: '#app',
      data: {
        message: { a: { b: 1 } }
      }
    })
  </script>
</body>

js部分：

function MyVue (options = {}) {
  //第一步：首先就是得到data对象
  this.$options = options;
  this._data = this.$options.data;

  //第二步：数据劫持，将data对象中每一个属性都设置get/set方法
  observe(this._data);

  //第三步：数据代理，这里就是将_data的对象属性放到myVue实例中一份，如果修改属性值实际上修改的还是data中的数据，会触发数据劫持
  for (let key in this._data) {
    //这里的this代表当前myVue实例对象
    Object.defineProperty(this, key, {
      enumerable: true,
      get () {
        return this._data[key];
      },
      set (newVal) {
        this._data[key] = newVal;
      }
    })
  }
}

//数据劫持操作
function observe (data) {
  // 如果data不是对象，就结束，不然递归调用会栈溢出的
  if (typeof data !== 'object') return;
  return new Observe(data);
}

function Observe (data) {
  // 遍历data所有属性
  for (let key in data) {
    let val = data[key];
    //初始化的时候， data中就有复杂对象的时候，例如data: { message:{a:{b:1}}}  ,就需要递归的遍历这个对象中每一个属性都添加get和set方法
    observe(val);
    Object.defineProperty(data, key, {
      enumerable: true,
      get () {
        return val;
      },
      set (newVal) {
        if (val === newVal) return;
        val = newVal;
        //当后续可能因为业务逻辑使得_data.message = {name: "小王"}，设置对象类型的属性值，就需要递归的给对象中{name: "小王"}的每个属性也添加get和set方法
        //否则name是没有get/set方法的
        observe(val);
      }
    })
  }
}

浅谈vue原理(一)

相关推荐