面试题分享,修改数据无法更新UI

这道面试题大概是这样的,在vue中,一个组件你修改了数据,但是页面没有更新,通常是什么原因造成的。

我:嗯...,大概可能是数据流原因造成的,如果一个子组件依赖父级,通常来说如果模版里未直接引用props,而是通过子组件data中一个变量去接收props值,如果父组件更新,但是如果此时子组件不监听props值变化,而从新赋值的话,那么一直都会是初始化的那个值。

我:或者是当你在使用hooks时,在子组件直接使用hooks导出的值,而不是通过父组件传子组件的值,你在父组件以为修改同一个hooks值时,子组件的值依然不会变化。

面试官:还有其他场景方式吗?

我:暂时没想到...

面试官:现在子组件有一个数组,假设你初始化数组的数据里面是多个字符串数组,然后我在子组件内部我是通过获取索引的方式去改变的,比如你在mounted通过数组索引下标的方式去改变,数据发生了变化,模版并不会更新,这也是一种场景

我:一般没有这么做,通常如果修改的话,会考虑在计算属性里面做,但是这种应该可以更新吧?于是我说了vue响应式如何做的,我想修改数组下标的值,为啥不是不会更新模版,不是有做对象劫持吗?修改值不会触发set方法吗,只要触发了set那么就会触发内部一个dep.notify去更新组件啊,这不科学啊。但事实上,如果一个数组的item是基础数据类型,用数组下标方式去修改数组值还真是不会更新模版。

于是去翻阅源码,写一个例子证实下。

正文开始...

开始一个例子

新建一个index.html

...
<div id="app">
    <div v-for="item in dataList">{{item}}</div>
    <div v-for="item in dataList2">{{item.name}}</div>
 </div>
<script src="./vue.js"></script>
然后我们引入index.js

var vm = new Vue({
      el: '#app',
      data() {
        return {
          dataList: ['Maic', 'Test'],
          dataList2: [
            {
              name: '深圳'
            },
            {
              name: '广州'
            }
          ]
        };
    },
  mounted() {
    debugger;
    this.dataList[0] = '111';
  }
});
我们在mounted中写入了一行调试代码,并且我们用数组索引改变dataList[0]选项的值

因为设置值肯定有改变数据的拦截,所以我在源码的defineReactive$$1也写入一行debugger

打开页面,我们可以看到


我们从第一行源码到defineReactive$$1方法的debugger分析进行逐步分析

首先是实例new Vue(options),实际上Vue就是下面的一个Vue$3构造函数,当传入options,此时会调用_init方法并传入options,这个options就是
// 以下就是Vue构造函数中的options
/*
  {
    el: '#app',
    data() {
      return {

      }
    },
    mounted() {

    }
  }
*/
function Vue$3(options) {
    if ("development" !== 'production' &&
      !(this instanceof Vue$3)) {
      warn('Vue is a constructor and should be called with the `new` keyword')
    }
    this._init(options)
}
然后我们会发现_init是挂载在Vue$3.prototype._init上,实际当我们一new Vue()时,就会执行_init方法,而_init方法,主要做了以下几件事情

1、为每一个实例vm对象绑定了一个uid

2、判断传入的options中是否含有component,注册这个传入的组件

3、合并options对象,并且会将传入的options动态绑定到$options中去

4、劫持options这个传入的对象,将这个传入的对象通过new Proxy(vm),从而绑定在vm._renderProxy这个对象上

5、动态绑定_self属性并指向vm实例对象

6、在_init方法干的最重要的几件事

initLifecycle(vm)主要是绑定一些自定义接口,比如你常常用this访问$children、$parent、$refs,_watcher等
initEvents(vm)这个方法主要是事件的更新监听
callHook(vm, 'beforeCreate'),主要执行Vue指定的钩子函数beforeCreate
当执行breforeCreate之后,那么此时就是进入initState(vm),这时对传入的options的数据进行响应式初始化操作
数据进行劫持,响应式后,就是执行callHook(vm, 'created')
调用initRender(vm)方法更新页面
具体代码可以参考以下

...
initLifecycle(vm) //
initEvents(vm)
callHook(vm, 'beforeCreate')
initState(vm)
callHook(vm, 'created')
initRender(vm)
我们依次从执行栈中去寻找真相


当调用initState方法后,此时会进入initData方法
在initData主要做什么呢?

1、主要是获取传入的data,并且对传入的data做了一些兼容处理,可以是函数,也可以是对象,并且对data必须返回一个对象做了防御性处理
  function initData(vm) {
    var data = vm.$options.data
    data = vm._data = typeof data === 'function'
      ? data.call(vm)
      : data || {}
  }
对传入的data中的属性进行proxy劫持处理,将data是两个数组dataList,dataList2直接挂在了vm对象上,所以我们在vue中都是直接this.dataList,this.dataList2,或者能访问methods的一些方法,就是这里在初始化的时候,进行了proxy,主要看下面这个proxy方法
function initData(vm) {
   ...
    // proxy data on instance
    var keys = Object.keys(data)
    var props = vm.$options.props
    var i = keys.length
    while (i--) {
      if (props && hasOwn(props, keys[i])) {
        "development" !== 'production' && warn(
          "The data property \"" + (keys[i]) + "\" is already declared as a prop. " +
          "Use prop default value instead.",
          vm
        )
      } else {
        proxy(vm, keys[i])
      }
    }
    // observe data
    observe(data)
    data.__ob__ && data.__ob__.vmCount++
  }
当对data中的属性进行一一proxy后,此时我们看到有有进行observer(data)这个操作

observer这是一个非常重要的方法,所有data中的数据在初始化时候,都会被放入new Observer(value)中去

我们具体看下observe这个方法

/* value 就是
  {
    dataList: ['Maic', 'Test'],
    dataList2: [{}, {}]
  }
*/
 function observe(value) {
    if (!isObject(value)) {
      return
    }
    // debugger;
    var ob
    if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
      ob = value.__ob__
    } else if (
      observerState.shouldConvert &&
      !config._isServer &&
      (Array.isArray(value) || isPlainObject(value)) &&
      Object.isExtensible(value) &&
      !value._isVue
    ) {
      ob = new Observer(value)
    }
    return ob
  }
进入new Observer()中,我们可以看到以下代码

var Observer = function Observer(value) {
    /*
    value:
      {
        dataList: ['Maic','Test'],
        dataList2: [{}]
      }
    */
    // debugger;
    this.value = value // data中返回的值
    // 动态绑定一个dep对象
    this.dep = new Dep()
    this.vmCount = 0
    // 主要会将value值copy到this的__ob__
    def(value, '__ob__', this)
    if (Array.isArray(value)) {
      var augment = hasProto
        ? protoAugment
        : copyAugment
      augment(value, arrayMethods, arrayKeys)
      this.observeArray(value)
    } else {
      this.walk(value)
    }
  };
从以上这段代码中首先每一个传入的对象会有一个this.dep = new Dep(),每一个对象都会有一个dep对象

首先会判断传入的value是不是一个对象,如果是对象就会走walk方法

walk方法的作用就是遍历传入的value,然后将value变成一个响应式的对象,用defineReactive$$1来劫持每个对象

// walk
Observer.prototype.walk = function walk(obj) {
    var keys = Object.keys(obj)
    for (var i = 0; i < keys.length; i++) {
      defineReactive$$1(obj, keys[i], obj[keys[i]])
    }
  };
此时当我们进入defineReactive$$1后






我们会发现,对于{dataList: ['Maic', 'Test']},首先会遍历dataList,获取dataList的值,然后把数组的值进行observe,在observe中,我们可以看到,如果这个值不是对象,直接通过isObject方法进行return了,​那么不会被Observer

  function observe(value) {
    //   这行代码是根据数组索引修改值,不会更新的根本原因
    if (!isObject(value)) {
      return
    }
    // debugger;
    var ob
    if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
      ob = value.__ob__
    } else if (
      observerState.shouldConvert &&
      !config._isServer &&
      (Array.isArray(value) || isPlainObject(value)) &&
      Object.isExtensible(value) &&
      !value._isVue
    ) {
      ob = new Observer(value)
    }
    return ob
  }
并且每个值都会有一个有一个对应的dep = new Dep(),在访问对象时会调用depend方法进行依赖收集


每一个对象都有一个dep对象,在dep对象的subs中就会添加一个watch
当从_init方法调用的,到数据初始化完成响应式拦截后,initState走完了,然后就是callHook(vm, 'created'),最后initRender(vm),然后就走到了我们在mounted方法debugger的位置


我们继续下一步,此时我们会走到修改数组

当我们直接进行下面操作

this.dataList[0] = "111";
首先会通过proxy方法,直接可以从vm对象data中获取dataList值

  function proxy(vm, key) {
    if (!isReserved(key)) {
      Object.defineProperty(vm, key, {
        configurable: true,
        enumerable: true,
        get: function proxyGetter() {
          return vm._data[key]
        },
        set: function proxySetter(val) {
          vm._data[key] = val
        }
      })
    }
  }
由于dataList在初始化的时候,数组中每一项都会先进行循环,如果是对象,则会遍历数组内部的对象,然后添加响应式,每一项都会dep依赖

但是由于dataList的每一项是数组字符串,我们可以继续看到这段代码

 var Observer = function Observer(value) {
    // debugger;
    this.value = value
    this.dep = new Dep()
    this.vmCount = 0
    def(value, '__ob__', this)
    // 由于dataList是数组
    if (Array.isArray(value)) {
      var augment = hasProto
        ? protoAugment
        : copyAugment
      augment(value, arrayMethods, arrayKeys)
      // 遍历数组
      this.observeArray(value)
    } else {
      this.walk(value)
    }
  };
看下observeArray,observe每一项

  Observer.prototype.observeArray = function observeArray(items) {
    for (var i = 0, l = items.length; i < l; i++) {
      observe(items[i])
    }
  };
然后看observe

  function observe(value) {
    if (!isObject(value)) {
      return
    }
    // debugger;
    var ob
    if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
      ob = value.__ob__
    } else if (
      observerState.shouldConvert &&
      !config._isServer &&
      (Array.isArray(value) || isPlainObject(value)) &&
      Object.isExtensible(value) &&
      !value._isVue
    ) {
      ob = new Observer(value)
    }
    return ob
  }
只有每一项被new Observer后,就会去调用walk,然后继续defineReactive$$1,这样每一项item就被Object.defineProperty拦截了。

此时如果是对象,当你对数组的item对象进行修改时,就会触发set进而更新页面了。

所以你修改this.dataList[0] = "111";,因为dataList的每一项item并不是一个对象,并没有被observer,所以修改其值,只是改变对原对象值,但是根本不会触​发拦截对象的set方法,自然就不会dep.notify()去派发更新,触发页面更新了

并没有更新页面


于是当你这样处理时

...
mounted() {
    debugger;
    this.dataList[0] = "111";
    this.dataList2[0].name = '北京';
},
你会发现,页面会更新了,但是实际上修改dataList并不会立即更新页面,会等dataList2[0]修改了,批量更新


所以当修改dataList2[0].name执行完毕后

已经可以看到页面更改了


另外你看到下面可能会疑惑

  ...
  data() {
    return {
      test: "Web技术学苑",
      dataList: ["Maic", "Test"],
      dataList2: [
        {
          name: "深圳",
        },
        {
          name: "广州",
        },
      ],
    };
  },
我在data中申明了一个test他的值也是字符串,不是对象啊,那么为什么我直接修改,也可以更新数据呢

  mounted() {
    debugger;
    this.dataList[0] = "111";
    this.test = "前端早早聊";
 },
这样你会发现this.test直接访问了data的数据,并且修改了test的数据。

其实当你修改test时,本质就会触发vm对象,这个this就是那个实例对象,因为实例对象在初始化的时候,这个对象就已经被Observer,所以当你修改test就是在设置实例化对象上的属性,自然就会触发set所以页面就更新了。

如果你直接修改this.dataList = ['aa', 'bb'],那么也是可以更新数据的,因为此时dataList是绑定在实例化对象上的,这个dataList已经被proxy处理直接挂载了this对象上,而这个this对象也是被Observer了,所以你修改其值,自然就会触发set,所以页面就会更新

在vue中,initState的时候,会将data中的所有数据变成响应式,每一个属性对象都会有一个dep,当这个属性值是数组时,会对数组进行遍历,如果数组的每项是引用数据类型,那么每一项都会被Observer,数组的每一项都会增加一个dep对象,当数据更新时,会派发更新所有的数据。

总结

当一个组件数据发生了变化,但是视图层没有发生变化,形成的原因只有以下几种

1、 数据流的问题,如果一个子组件的props数据时直接通过子组件data中去接收props,当修改负组件props时,如果子组件不监听props,重新对data赋值那么可能会导致子组件数据并不会更新

2、 如果使用hooks,如果并不会是从负组件传入的props,而是重新在子组件重新引入hooks,在负组件你修改同一份hooks引用,子组件并不会有效果,因为hooks每次调用都会时一份新的引用,所以子组件只能从props接口获取

当一个数组的每一个item并不是对象时,其实此时item并不是一个响应式,并不会被Observe,在data初始化的每一个对象vue初始化时,都会给每一个对象变成reactive,并且每一个对象会有一个dep对象。只有被Observer,修改其值才会触发set,从而更新视图层

我们每一个data中返回的对象的值都会被Observer,每一个数组对象在初始化时都会被Observer,数组中的每一个对象都会添加一个dep对象,当数组对象发生变化时,就会触发对象拦截,更新操作。如果数组中的每一项是基础数据类型,那么通过索引方式修改其值并不会触发更新UI​

code example[1]

参考资料

[1]
code example: https://github.com/maicFir/lessonNote/tree/master/vue/03-数组响应式测试

最后,看完觉得有收获的,点个赞,在看,转发,收藏等于学会,欢迎关注Web技术学苑,好好学习,天天向上!













作者:Maic


欢迎关注微信公众号 :web技术学苑