2024年最新vue2双向数据绑定原理，大厂面试必备技能有哪些

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

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

// 当前被循环的key所对应的属性值

let value = obj[key]

// 把value这个子节点，进行递归

Observe(value)

// 需要为当前的key所对应的属性，添加getter和setter

Object.defineProperty(obj,key,{

enumerable:true,

configurable:true,

get(){

Dep.target && dep.addSub(Dep.target)

console.log(有人读取了${key}的值);

return value

},

set(newVal){

value = newVal

Observe(value)

dep.notify()

},

})

})

}

// 对HTML结构进行模板编译的方法

function Compile(el,vm){

// 获取el对应的DOM元素

vm.$el = document.querySelector(el)

const fragment = document.createDocumentFragment()

while((childNode = vm.$el.firstChild)){

fragment.appendChild(childNode)

}

// 进行模板编译

replace(fragment)

vm.$el.appendChild(fragment)

function replace(node){

// 定义匹配插值表达式的正则

const regMustache = /{{\s*(\S+)\s*}}/

// 证明当前的node节点是一个文本子节点，需要进行正则的替换

if(node.nodeType===3){

// 注意：文本子节点，也是一个DOM对象，如果要获取文本子节点的字符串内容，需要调用textContent属性获取

const text = node.textContent

const execResult = regMustache.exec(text)

if(execResult){

const value = execResult[1].split(‘.’).reduce((newObj,k)=>newObj[k],vm)

node.textContent = text.replace(regMustache,value)

new Watcher(vm,execResult[1],(newValue)=>{

node.textContent = text.replace(regMustache,newValue)

})

}

// 终止递归的条件

return

}

// 判断当前的node节点是否为input输入框

if(node.nodeType===1 && node.tagName.toUpperCase() === ‘INPUT’){

const attrs = Array.from(node.attributes)

const findResult = attrs.find((x)=>x.name===‘v-model’)

if(findResult){

const expStr = findResult.value

const value = expStr.split(‘.’).reduce((newObj,k)=>newObj[k],vm)

node.value = value

new Watcher(vm,expStr,(newValue)=>{

node.value = newValue

})

// 监听文本框的input输入事件，拿到文本框最新的值，把最新的值，更新到vm上即可

node.addEventListener(‘input’,(e)=>{

const keyArr = expStr.split(‘.’)

const obj = keyArr.slice(0,keyArr.length-1).reduce((newObj,k)=>newObj[k],vm)

obj[keyArr[keyArr.length-1]] = e.target.value

})

}

}

// 证明不是文本节点，可能是一个DOM元素，需要进行递归处理

node.childNodes.forEach(child=>replace(child))

}

}

// 收集依赖/收集订阅者

class Dep{

constructor(){

// 今后，所有的watcher都要存到这个数组中

this.subs = []

}

// 向 subs 数组中，添加watcher的方法

addSub(watcher){

this.subs.push(watcher)

}

// 负责通知每个watcher的方法

notify(){

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

}

}

class Watcher{

constructor(vm,key,cb){

this.vm = vm

this.key = key

this.cb = cb

Dep.target = this

key.split(‘.’).reduce((newObj,k)=>newObj[k],vm )

Dep.target = null

}

update(){

const value = this.key.split(‘.’).reduce((newObj,k)=>newObj[k],this.vm)

this.cb(value)

}

}

html文件

文末

逆水行舟不进则退，所以大家要有危机意识。

同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

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

前端面试题汇总