vue2响应式原理

最新推荐文章于 2024-06-03 09:15:36 发布

聿见

最新推荐文章于 2024-06-03 09:15:36 发布

阅读量188

点赞数

分类专栏： vue 面试文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/guodanpidashu/article/details/127309256

版权

vue 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

面试

2 篇文章 0 订阅

订阅专栏

let Dep = {

  clientList: {}, //容器

  // 添加订阅

  listen: function (key, fn) {

      // 短路表达式， fn是附送消息

    (this.clientList[key] || (this.clientList[key] = [])).push(fn);

  },

  // 发布

  trigger: function () {

    let key = Array.prototype.shift.call(arguments),

      fns = this.clientList[key];

    if (!fns || fns.length === 0) {

      return false;

    }

    for (let i = 0, fn; (fn = fns[i++]); ) {

      fn.apply(this.arguments);

    }

  },

};



// 数据劫持

let dataHi = function ({data,tag,datakey,selector}){

    let value = '',

        le = document.querySelector(selector);



    Object.defineProperty(data,datakey,{

        //取值

        get:function(){

            return value;

        },

        set:function(newVal){

            value = newVal;

            // 发布  -----重点

            Dep.trigger(tag,val)

        }

    })

    // 订阅

    Dep.listen(tag,function(text){

        el.innerHTML = text

    })

}