vue响应式的原理(vue双向绑定的原理)

最新推荐文章于 2024-01-03 18:46:22 发布

大盗夕落

最新推荐文章于 2024-01-03 18:46:22 发布

阅读量188

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_45621877/article/details/103706809

版权

笔记专栏收录该内容

42 篇文章 0 订阅

订阅专栏

vue2.0中用的Object.definePrototype
observe入口-》definePrototype 收集依赖dep.deped dep.render渲染
在了解defineprototype之前我们要先了解对象Object的描述符

var obj={
        a:1,
        b:2
    };
    Object.getOwnPropertyDescriptor(obj,"a");   //获取obj对象中的 a 的描述符
    //{value: 1, v: true, enumerable: true, configurable: true}

//    Object.defineProperty(obj,"a",{
//     writable:false,  //不可写
//     enumerable:false, //不可用for in 枚举
//    })

var _val=obj.b;
Object.defineProperty(obj,"b",{
    set(newval){
        return _val = newval;
    },
    get(){
        return _val;
    }
})
obj.b=3333;   //3333 改变就用了set和get

接下来我吗看一下vue中源码

/**
   * Define a reactive property on an Object.
   */
  function defineReactive$$1 (
    obj,
    key,
    val,
    customSetter,
    shallow
  ) {
    var dep = new Dep();

    var property = Object.getOwnPropertyDescriptor(obj, key);
    if (property && property.configurable === false) {
      return
    }

    // cater for pre-defined getter/setters
    var getter = property && property.get;
    var setter = property && property.set;
    if ((!getter || setter) && arguments.length === 2) {
      val = obj[key];
    }

    var childOb = !shallow && observe(val);
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: function reactiveGetter () {
        var value = getter ? getter.call(obj) : val;
        if (Dep.target) {
          dep.depend();  //在get中用dep.depend()收集依赖，收集那些地方修改了这个对象
          if (childOb) {
            childOb.dep.depend();
            if (Array.isArray(value)) {
              dependArray(value);
            }
          }
        }
        return value
      },
      set: function reactiveSetter (newVal) {
        var value = getter ? getter.call(obj) : val;
        /* eslint-disable no-self-compare */
        if (newVal === value || (newVal !== newVal && value !== value)) {
          return
        }
        /* eslint-enable no-self-compare */
        if (customSetter) {
          customSetter();
        }
        // #7981: for accessor properties without setter
        if (getter && !setter) { return }
        if (setter) {
          setter.call(obj, newVal);
        } else {
          val = newVal;
        }
        childOb = !shallow && observe(newVal);
        dep.notify();  //dep.notify() 渲染
      }
    });
  }

接下来我们看一个简单的实现响应式原理的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式源码</title>
</head>
<body>

<div id="app"></div>
<script src="1.js"></script>
<script>
var vm = new vue();
setTimeout(function(){
    vm.$data.a=5555;
},200)
</script>
 
</body>
</html>

然后 1.js

function vue(){
    debugger
    this.$data = {a:1};
    this.el=document.getElementById("app");
    this.virtualdom ="";
    this.observe(this.$data);
    this.render();
}

vue.prototype.observe=function(obj){
    var self=this;
    var value;
    for(var key in obj){
        value=obj[key];
        if(typeof value =="object"){
            this.observe(value);
        }else{
            Object.defineProperty(this.$data,key,{
                get(){
                //省略了收集依赖
                    return value;
                },
                set(newval){
                    value=newval;
                    //省略了render树渲染
                    self.render();
                }
            })
        }
    }
}
vue.prototype.render=function(){
    this.virtualdom ="i am"+this.$data.a;
    this.el.innerHTML =this.virtualdom;
}

上面的definePrototype是针对对象的，那么数组怎么办，可查看源码

  /**
   * Collect dependencies on array elements when the array is touched, since
   * we cannot intercept array element access like property getters.
   */
  function dependArray (value) {
    for (var e = (void 0), i = 0, l = value.length; i < l; i++) {
      e = value[i];
      e && e.__ob__ && e.__ob__.dep.depend();
      if (Array.isArray(e)) {
        dependArray(e);
      }
    }
  }

//数组监听，自己可以理解为如下代码

var arraypro =Array.prototype;
var arrayob =Object.create(arraypro);    //深拷贝
var arr=['push','pop','shift'];
arr.forEach(function(method,index){
    arrayob[method]=function(){
        var ret=arraypro[method].apply(this,arguments);
        departFocus.notify();
        return ret;
    }
})

vue3.0中使用的Proxy

可以省去一个循环，不用for循环遍历每一项了
代码更简单
不会污染原对象，生成一个代理

//proxy 相对于define 省去了循环，提高了性能
var obj2 = {a:1,b:2};
var ob =new Proxy(obj2,{
    get:function(target,key,value,reciver){
        return Reflect.get(target,key);
    },
    set:function(target,key,value,receiver){
        return Reflect.set(target,key,value);
    }
})