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

面试题分享,修改数据无法更新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是两个数组dataListdataList2直接挂在了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技术学苑,好好学习,天天向上!



点个在看你最好看


来源: 前端之神