VUE源码分析之全局set函数原理

最新推荐文章于 2024-07-04 09:46:22 发布

夜跑者

最新推荐文章于 2024-07-04 09:46:22 发布

阅读量273

点赞数

分类专栏： VUE学习

本文链接：https://blog.csdn.net/liubangbo/article/details/102505954

版权

VUE学习专栏收录该内容

79 篇文章 4 订阅

订阅专栏

Vue.js提供了全局函数set 可以用来为响应式对象添加新属性，使其具备响应式特性，另外也可以作用于数组，使其修改数组后，页面可以进行更新。

<!DOCTYPE html>
<html>
 
<head>
 
    <meta charset="utf-8">
    <title>vue demo</title>
 
</head>
 
 
<body>
 
<script src="./vue.js"></script>
 
<div id="app">
    <ul>
        <li v-for = 'item in listData'>{{item}}</li>
    </ul>
    <button @click="addData">add data</button>
</div>
 
<script>
    new Vue({
        el:"#app",
        data:{
            listData: {
                first: "first data",
                second: "second data"
            }
        },
        methods:{
            addData () {
                //this.listData.third = "third data";
                Vue.set(this.listData, "third", "third data");
            }
        }
    })
    
</script>
 
</body>
</html>

代码很简单，先渲染出first data, second data 。当点击add data button时会渲染出third data。而我们直接给listData 添加third属性时并没有渲染出来。我们看看用Vue.set函数为什么就可以渲染出来third data。

  function set (target, key, val) {
    if (isUndef(target) || isPrimitive(target)
    ) {
      warn(("Cannot set reactive property on undefined, null, or primitive value: " + ((target))));
    }
    if (Array.isArray(target) && isValidArrayIndex(key)) {
      target.length = Math.max(target.length, key);
      target.splice(key, 1, val);
      return val
    }
    if (key in target && !(key in Object.prototype)) {
      target[key] = val;
      return val
    }
    var ob = (target).__ob__;
    if (target._isVue || (ob && ob.vmCount)) {
      warn(
        'Avoid adding reactive properties to a Vue instance or its root $data ' +
        'at runtime - declare it upfront in the data option.'
      );
      return val
    }
    if (!ob) {
      target[key] = val;
      return val
    }
    defineReactive$$1(ob.value, key, val);
    ob.dep.notify();
    return val
  }

首先看看set函数的参数，第一个参数target就是我们要设置的对象，第二个参数就是要作用于对象的属性，第三个参数是要对象属性对应的值。当target为数组时，第二个参数就对应的是数组的索引。set函数中对数组的处理是采用了数组的splice函数来实现的。我们看看target为一对象时处理过程。

先判断对象中是否已经存在要添加的属性，如果存在就直接设置属性值。如果没有就取得target的__ob__属性，我们先看看这个__ob__属性怎么回事，从下面的代码看__ob__是实现set函数功能的关键。

我们猜测是对data选项初始化的时候设置的，我们看看initData函数中的observe函数：

  function observe (value, asRootData) {
    if (!isObject(value) || value instanceof VNode) {
      return
    }
    var ob;
    if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
      ob = value.__ob__;
    } else if (
      shouldObserve &&
      !isServerRendering() &&
      (Array.isArray(value) || isPlainObject(value)) &&
      Object.isExtensible(value) &&
      !value._isVue
    ) {
      ob = new Observer(value);
    }
    if (asRootData && ob) {
      ob.vmCount++;
    }
    return ob
  }

里面有对__ob__的处理。继续看Observer构造函数：

  var Observer = function Observer (value) {
    this.value = value;
    this.dep = new Dep();
    this.vmCount = 0;
    def(value, '__ob__', this);
    if (Array.isArray(value)) {
      if (hasProto) {
        protoAugment(value, arrayMethods);
      } else {
        copyAugment(value, arrayMethods, arrayKeys);
      }
      this.observeArray(value);
    } else {
      this.walk(value);
    }
  };

看看这行代码def(value, '__ob__', this); 设置__ob__属性的地方找到了。给value对象设置__ob__属性，并且其值指向了自身。所以说在set函数中通过(target).__ob__ 得到了observer对象，再通过value可以取得listData对象。其实我们可以看出target就是listData对象，在defineReactive$$1(ob.value, key, val); 这行代码中把ob.value 换成target也是可以的。但ob.dep.notify(); 这行代码还是需要把__ob__给取出来，因为在__ob__属性值中才有dep属性。直接用target.dep是不行的。

defineReactive$$1(ob.value, key, val) 就把新添加的属性设置为响应式的，ob.dep.notify()这行代码进行了渲染更新。

夜跑者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE源码分析之全局set函数原理

Vue.js提供了全局函数set 可以用来为响应式对象添加新属性，使其具备响应式特性，另外也可以作用于数组，使其修改数组后，页面可以进行更新。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue demo</title> ...
复制链接

扫一扫

专栏目录