2024年最全Vue中实现$set方法(Vue原理之步骤四)，2024年大厂前端高级面试题分享

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

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

//获取到的值返回出去

return data[keys[i]]

},

//修改值的时候触发

set:function proxySetter(value) {

//改变值的时候,给获取到的值赋值新值value

data[keys[i]] = value

}

})

}

//调研判断是基本类型还是复杂类型的数据 来实现数据劫持

observe(data)

//调用initWatch函数执行

this.initWatch()

}

initWatch() {

//$options参数对象中是否有watch这个属性

let watch = this.$options.watch

if(watch) {

let keys = Object.keys(watch)

//遍历watch属性中的值

for(let i = 0; i < keys.length; i++){

//new一个Watcher的实例,

new Watcher(this,keys[i],watch[keys[i]])

}

}

}

//实例对象上挂载一个和watch同样的方法

$watch(key,cb) {

new Watcher(this,key,cb)

}

//实现$set方法

$set(target,key,value){

//新增的属性也变成响应式的

defineReactive(target,key,value)

//执行

target.ob.dep.notify()

}

}

//判断类型的函数observe

/**

• @param {*} data

*/

function observe(data) {

//判断data的数据类型

let type = Object.prototype.toString.call(data)

//如果是基本类型就直接返回

if(type !== ‘[object Object]’ && type !== ‘[object Array]’){

return

}

if(data.ob){

return data.ob

}

//如果是复杂类型,new一个实例

return new Observer(data)

}

//创建一个观察值类,观察data中的数据变化

class Observer {

constructor(data) {

//调用函数

this.walk(data)

//实现$set需要重新new一个Dep实例

this.dep = new Dep()

//在data中新增一个__ob__属性,设置该属性不可遍历

Object.defineProperty(data,‘ob’,{

value:this,

//不可遍历

enumerable:false,

configurable:true,

writable:true

})

}

//walk函数

walk(data) {

let keys = Object.keys(data)

for(let i = 0; i < keys.length; i++){

//代用抽离出去的函数

defineReactive(data,keys[i],data[keys[i]])

}

}

}

//抽离函数

/**

• @param {*} obj 传进来的对象

• @param {*} key 属性

• @param {*} value 之前的值

*/

function defineReactive(obj,key,value){

//递归,判断数据类型

let childObj = observe(obj[key])

//new一个dep的实例

let dep = new Dep()

Object.defineProperty(obj,key,{

enumerable:true,

configurable:true,

//获取到属性值时调用该函数

get:function reactiveGetter(){

//调用depend函数收集回调函数

dep.depend()

//也收集一份,先判断是否存在

if(childObj) {

childObj.dep.depend()

}

//或取到的值返回出去

return value

},

//设置值的时候掉用该函数

set:function reactiveSetter(val){

//对比新设置的值和原来的值是否相同

if(val === value){

//相同的话直接返回

return

}

//执行相应回调

dep.notify()

//否则,设置新值

value = val

}

})

}

//新建一个dep的类

class Dep{

constructor(){

//收集的回调存放在数组中

this.subs = []

}

//收集回调函数

depend() {

//把回调添加到数组中

if(Dep.target) {

//把含有不同属性的Watcher实例添加到数组中

this.subs.push(Dep.target)

}

}

//执行相应的回调函数

notify() {

//循环遍历数组,执行相应回调

this.subs.forEach((watcher)=>{

// watcher指的是数组中的每一项,每一项是Watcher实例,实例中包含run函数

//一次执行回调函数

watcher.run()

})

}

}

//每一个watcher的标识

刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

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

• 前端字节跳动真题解析

  

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。

dn.net/topics/618166371)**

• 前端字节跳动真题解析

  

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。