vue2 底层原理

1、mvc 和 mvvm

mvc 数据存于后台，必须等接口做好了，才能往下开发，前端没有自己的控制中心，不够独立。

用户操作view => Controller（业务逻辑处理）=》model(数据持久化) =》把结果返回给view(更新view数据)；

mmvm(Model-View-ViewModel) 前后端分离，前端可以缓存数据，把数据放到 data里面，不需要频繁存到后台。主要思想是 “数据双向绑定”。view 的数据变化 可以自动反映到 viewModel,反之亦然。

2、v-model双向数据绑定

数据劫持 + 发布订阅模式

vue2中 数据劫持的核心技术： 使用 Object.defineProperty()；

（vue 3.0 采用是 原生的 Proxy）

发布订阅模式+ 数据劫持方式 实现 v-model 数据双向绑定

// 发布订阅
let Dep = {
  clientList: {},
  // 订阅
  listen: function(key, fn) {
    // if(!this.clientList[key]) {
    //   this.clientList[key] = []
    // }
    // this.clientList.push(fn)
    // 短路表达式
    (this.clientList[key] || (this.clientList[key] = [])).push(fn);
  },
  // 发布
  trigger: function() {
    // arguments 是一个对象（类数组对象），传入函数的所有参数都存在这里面
    // 获取 arguments中的第一个参数，删除，并返回该值
    let key = Array.prototype.shift.call(arguments);
    let fns = this.clientList[key];
    if(!fns || fns.length === 0) {
      return false;
    }
    // for (let i = 0; i < fns.length; i++) {
    //   let fn = fns[i]
    //   fn.apply(this, arguments)
    // }
    for(let i =0,fn;fn=fns[i++];) {
      console.log(arguments);
      fn.apply(this, arguments)
    }
  }
}

// 数据劫持
let dataHi = function({data,tag,datakey,selector}) {
  let value = '',
      el = document.querySelector(selector);
      console.log(el);
  Object.defineProperty(data, datakey ,{
    get: function () {
      console.log('取值');
      return value;
    },
    set: function(val) {
      console.log("设置值");
      value = val;
      Dep.trigger(tag, val)
    }
  })
  Dep.listen(tag, function(text) {
    el.innerHTML = text
  })
}