上周五跟着一个师姐面试一个三年工作经验的前端开发,我在一边谨慎的观摩。想着曾经我也被别人面试过,如今面试别人,感觉其实心情是一样的。
前言
其实我们并不是要你把答案都记下来,而是把其中的思想学习到。就像你接触一个新的领域react,你也一样可以把基本思想提炼出来。
面试题:
👂Vue是如何对数据进行监听的?
这其实是老生常谈的问题,但凡你有一点基础知识,你也能答出一二。师姐跟我说,其实问题不只是问题本身,而是跟这个知识顺带出来的体系。
📝
01 对象数据是怎么被监听的
在vue2.x版本中,数据监听是用过Object.defineProperty这个API来实现的,我们可以来看一个例子🌰
var text = 'vue';
const data = {};
Object.defineProperty(data, 'text', {
get() {
return text;
},
set(newVal) {
text = newVal;
}
});
data.text // 'vue'
data.text = 'react' // 'react'
当我们访问或设置对象的属性的时候,都会触发相对应的函数,然后在这个函数里返回或设置属性的值。我们当然可以在触发函数的时候做我们自己想做的事情,这也就是“劫持”操作。
在Vue中其实就是通过Object.defineProperty
来劫持对象属性的setter和getter
操作,并创建一个监听器,当数据发生变化的时候发出通知。
var data = {
name:'hello',
age:18
}
Object.keys(data).forEach(function(key){
Object.defineProperty(data,key,{
enumerable:true, // 是否能在for...in循环中遍历出来或在Object.keys中列举出来。
configurable:true, // false,不可修改、删除目标属性或修改属性性以下特性
get:function(){
console.log('获取数据');
},
set:function(){
console.log('监听到数据发生了变化');
}
})
});
data.name //控制台会打印出 “获取数据”
data.name = 'world' //控制台会打印出 "监听到数据发生了变化"
参考 前端vue面试题详细解答
02 数组数据是怎么被监听的
我们知道,上面是对对象的数据进行监听的,我们不能对数组进行数据的“劫持”。那么Vue是怎么做的呢?
import { def } from '../util/index'
const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)
const methodsToPatch = [
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
]
methodsToPatch.forEach(function (method) {
// 缓存原来的方法
const original = arrayProto[method]
def(arrayMethods, method, function mutator (...args) {
const result = original.apply(this, args)
const ob = this.__ob__
let inserted
switch (method) {
case 'push':
case 'unshift':
inserted = args
break
case 'splice':
inserted = args.slice(2)
break
}
if (inserted) ob.observeArray(inserted)
// notify change
ob.dep.notify()
return result
})
})
看来Vue能对数组进行监听的原因是,把数组的方法重写了。总结起来就是这几步:
01先获取原生 Array 的原型方法,因为拦截后还是需要原生的方法帮我们实现数组的变化。
02对 Array 的原型方法使用 Object.defineProperty 做一些拦截操作。
03把需要被拦截的 Array 类型的数据原型指向改造后原型。
并不是说 JS 不能支持响应式数组,其实JS是没有这种限制的。
数组在 JS 中常被当作栈,队列,集合等数据结构的实现方式,会有批量的数据以待遍历。并且 runtime 对对象与数组的优化也有所不同。
所以对数组的处理需要特化出来以提高性能。
Vue 中是通过对每个键设置 getter/setter 来实现响应式的,开发者使用数组,目的往往是遍历,此时调用 getter 开销太大了,所以 Vue 不在数组每个键上设置,而是在数组上定义 __ob__
,并且替换了 push 等等能够影响原数组的原型方法。
为此也有人去GitHub问了尤大,他的回答也是说因为性能问题而没有采用这种方式监听数组。github.com/vuejs/vue/i…
源码位置:src/core/observer/index.js
constructor (value: any) {
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)
}
}
/** * Walk through all properties and convert them into * getter/setters. This method should only be called when * value type is Object. */
walk (obj: Object) {
const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i])
}
}
通过源码我们可以知道,Vue 没有对数组每个键设置响应式的过程,而是直接对值进行递归设置响应式。
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bXAOgefO-1664934548783)(https://imgkr2.cn-bj.ufileos.com/a9ed86e2-9a6f-47a8-9653-fdaf4799e1a8.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=dOUCYnDzU6tGCOapegBV6DJlVEo%253D&Expires=1609215649)
还是去源码瞅一眼,看vue是怎么对数组进行处理的。
源码位置:dist/vue.runtime.esm.js
function set (target, key, val) {
//...
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
}
//...
defineReactive$$1(ob.value, key, val);
ob.dep.notify();
return val
}
这就是vue重写数组方法的原因,利用数组这些方法触发使得每一项的value都是响应式的。
正如之前所说,面试一道题目不在乎表面你回答多么准确,实际上在乎的是其中的来龙去脉。我们由浅入深,一步步解密其中的原理,这才是学习的思想。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。