2024年Vue2(1)，2024年最新oppo前端开发面试题

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

function defineReactive(data, key, value) {

Object.defineProperty(data, key, {

enumerable: true,

configurable: true,

get: function defineGet() {

console.log(get key: ${key} value: ${value})

return value

},

set: function defineSet(newVal) {

console.log(set key: ${key} value: ${newVal})

value = newVal

}

})

}

function observe(data) {

Object.keys(data).forEach(function(key) {

defineReactive(data, key, data[key])

})

}

let arr = [1, 2, 3]

observe(arr)

测试环境

=======================================================================

通过索引改变arr[1]，我们发现触发了set，也就是Object.defineProperty是可以检测到通过索引改变数组的操作的，那Vue2.0为什么没有实现呢？是尤大能力不行？这肯定毋庸置疑。那他为什么不实现呢？

小结：是出于对性能原因的考虑，没有去实现它。而不是不能实现。

对于对象而言，每一次的数据变更都会对对象的属性进行一次枚举，一般对象本身的属性数量有限，所以对于遍历枚举等方式产生的性能损耗可以忽略不计，但是对于数组而言呢？数组包含的元素量是可能达到成千上万，假设对于每一次数组元素的更新都触发了枚举/遍历，其带来的性能损耗将与获得的用户体验不成正比，故vue无法检测数组的变动。

不过Vue3.0用proxy代替了defineProperty之后就解决了这个问题。

解决方案

=======================================================================

1、this.$set(array, index, data)

//这是个深度的修改，某些情况下可能导致你不希望的结果，因此最好还是慎用

this.dataArr = this.originArr

this.$set(this.dataArr, 0, {data: ‘修改第一个元素’})

console.log(this.dataArr)

console.log(this.originArr) //同样的 源数组也会被修改 在某些情况下会导致你不希望的结果

2、splice

最后

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】