共计 3352 个字符，预计需要花费 9 分钟才能阅读完成。
上周五跟着一个师姐面试一个三年工作教训的前端开发，我在一边审慎的观摩。想着已经我也被他人面试过，现在面试他人，感觉其实情绪是一样的。
前言
- 工作三年的 Vue 使用者应该懂什么？
- 为何工作几年的根底越来越弱？
- 工作如何挤出工夫学习？
一道面试题
其实咱们并不是要你把答案都记下来，而是把其中的思维学习到。就像你接触一个新的畛域 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 类型的数据原型指向革新后原型。
Vue 为什么不能检测数组变动
并不是说 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….)]
$set 为啥能检测数组变动
还是去源码瞅一眼，看 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
}
- 如果 target 是一个数组且索引无效，就设置 length 的属性。
- 通过 splice 办法把 value 设置到 target 数组指定地位。
- 设置的时候，vue 会拦挡到 target 发生变化，而后把新增的 value 也变成响应式
- 最初返回 value
这就是 vue 重写数组办法的起因，利用数组这些办法触发使得每一项的 value 都是响应式的。
答复思维
正如之前所说，面试一道题目不在乎外表你答复如许精确，实际上在乎的是其中的前因后果。咱们由浅入深，一步步解密其中的原理，这才是学习的思维。
