标签：function 订阅 劫持 vue Dep let key

vue数据双向绑定原理：

数据劫持: vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

observer：每个对象的属性，添加到订阅者容器Dependency(Dep)中，当数据发生变化的时候发出notice通知。

Watcher：某个属性数据的监听者/订阅者，一旦数据有变化，它会通知指令(directive)重新编译模板并渲染UI

Dep对象: 订阅者容器，负责维护watcher

订阅模型：

// 订阅器模型
let Dep = {
  clientList: {},
  // 添加订阅
  listen: function(key, fn) {
    (this.clientList[key] || (this.clientList[key] = [])).push(fn);
  },
  // 发布
  trigger: function(){
    // 将类数组转化为数组
    let key = Array.prototype.shift.call(arguments),
        fnd = this.clientList[key];
    if(!fns || fns.length === 0){
      return false;
    }
    for(let i = 0,fn; fn = fns[i++];) {
      fn.apply(this,arguments)
    }
  }
}

数据劫持：

//数据劫持
/**
 * data：要劫持的数据
 * datakey：具体的属性值
 * selector：dom节点
 */
let mydatadefineProperty = function ({data, tag, datakey, selector}){
  let value = '',
      el = document.querySelector(selector);
  Object.defineProperty(data,datakey,{
    get: function () {
      return value;
    },
    set: function (val) {
      value = val;
      // 发布
      Dep.trigger(tag, val);
    }
  })
  // 订阅
 Dep.listen(tag, function(text){
   el.innerHtml = text;
 })
}

标签：function,订阅,劫持,vue,Dep,let,key
来源： https://blog.csdn.net/weixin_44717486/article/details/122814423

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。