2024年前端最全实现vue中数组(Vue原理之步骤五)，社招常见面试问题及答案

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

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

//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) {

//数组不能使用Object.defineProperty,下标会乱 ,需要判断一下

if(Array.isArray(data)){

//遇到数组,先把数组的__proto__指向定义的原型对象

data.proto = ArrayMethods

//调用

this.observeArray(data)

}else{

//调用函数

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]])

}

}

//由于数组中可能存放对象等

observeArray(arr){

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

//调用observe函数,如果是对象的那些元素,调用observe函数,变成响应式的

observe(arr[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的标识

let watcherId = 0;

//存放标识id的数组,用于检查是否有相同的watch

let watcherQueue = [];

//把回调抽象成一个Watcher类

class Watcher {

//参数1:vue实例,参数2:哪一个属性,参数3:回调函数是什么

constructor(vm,exp,cb){

this.vm = vm;

this.exp = exp;

this.cb = cb;

this.id = ++watcherId;

this.get()

}

//求值

get(){

//把Watcher类的this 挂载到Dep类的静态属性上,相当于把Watcher实例挂载到全局了

Dep.target = this;

//调用下边这个表达式,触发数据劫持中get函数,从而调用depend函数

this.vm[this.exp]

//然后清空

Dep.target = null

}

//执行函数

run() {

最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

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

}

//执行函数

run() {

最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

[外链图片转存中…(img-75enTqa8-1715533067313)]

[外链图片转存中…(img-TyOCbsqi-1715533067314)]

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