2024年最新到底该如何回答：vue数据绑定的实现原理？，2024年最新hashmap常见面试题

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道

HTML

• HTML5有哪些新特性？

• Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

• 如何实现浏览器内多个标签页之间的通信？

• ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

• 简述⼀下src与href的区别？

• cookies,sessionStorage,localStorage 的区别？

• HTML5 的离线储存的使用和原理？

• 怎样处理 移动端 1px 被 渲染成 2px 问题？

• iframe 的优缺点？

• Canvas 和 SVG 图形的区别是什么？

JavaScript

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

• 问：0.1 + 0.2 === 0.3 嘛？为什么？

• JS 数据类型

• 写代码：实现函数能够深度克隆基本类型

• 事件流

• 事件是如何实现的？

• new 一个函数发生了什么

• 什么是作用域？

• JS 隐式转换，显示转换

• 了解 this 嘛，bind，call，apply 具体指什么

• 手写 bind、apply、call

• setTimeout(fn, 0)多久才执行，Event Loop

• 手写题：Promise 原理

• 说一下原型链和原型链的继承吧

• 数组能够调用的函数有那些？

• PWA使用过吗？serviceWorker的使用原理是啥？

• ES6 之前使用 prototype 实现继承

• 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

• 事件循环机制 （Event Loop）

• Watcher对象：将模板和Observer对象结合在一起生成Watcher实例，Watcher是订阅者中的订阅者。

• Dep对象：Watcher对象和Observer对象之间纽带，每一个Observer都有一个Dep实例，用来存储订阅者Watcher。

当属性变化会执行主题对象Observer的dep.notify方法， 这个方法会遍历订阅者Watcher列表向其发送消息， Watcher会执行run方法去更新视图。

依赖关系图如下，更能方面我们的理解

接着我们需要补充的是：模板编译过程中的指令和数据绑定都会生成Watcher实例，实例中的watch属性也会生成Watcher实例。

说的这些有没有觉得有点乱，那我们总结一下如何亮点回答

• 1、在生命周期的initState方法中将data，prop，method，computed，watch中的数据劫持， 通过observe方法与Object.defineProperty方法将相关对象转为换Observer对象。

• 2、然后在initRender方法中解析模板，通过Watcher对象，Dep对象与观察者模式将模板中的 指令与对象的数据建立依赖关系，使用全局对象Dep.target实现依赖收集。

• 3、当数据变化时，setter被调用，触发Object.defineProperty方法中的dep.notify方法， 遍历该数据依赖列表，执行器update方法通知Watcher进行视图更新。

• vue是无法检测到对象属性的添加和删除，但是可以使用全局Vue.set方法（或vm.$set实例方法）。

• vue无法检测利用索引设置数组，但是可以使用全局Vue.set方法（或vm.$set实例方法）。

• 无法检测直接修改数组长度，但是可以使用splice

然后写一个使用Object.defineProperty实现监听变量

var obj = {};

var a;

Object.defineProperty(obj, ‘a’, {

get: function() {

console.log(‘get val’);

return a;

},

set: function(newVal) {

console.log(‘set val:’ + newVal);

a = newVal;

}

});

obj.a; // get val

obj.a = ‘saucxs’ //set val

如果上面代码格式出现问题，可以查看下面代码图片

3、进阶回答

因为现在vue已经到3了，不再是停留在2的时候，这个时候，可以把3的原理简单说一下。

这个时候不应该是ES6的proxy特性上场了，proxy是ES6的新增的功能，可以用来定义对象中的操作。

let p = new Proxy(target, handler);

// target 代表需要添加代理的对象

// handler 用来自定义对象中的操作

如果上面代码格式出现问题，可以查看下面代码图片

可以很方便的使用 Proxy 来实现一个数据绑定和监听.

let onWatch = (obj, setBind, getLogger) => {

let handler = {

get(target, property, receiver) {

getLogger(target, property)

return Reflect.get(target, property, receiver);

},

set(target, property, value, receiver) {

setBind(value);

return Reflect.set(target, property, value);

}

};

return new Proxy(obj, handler);

};

let obj = { saucxs: 1 }

let value

let p = onWatch(obj, (v) => {

value = v

}, (target, property) => {

console.log(Get '${property}' = ${target[property]});

})

p.saucxs = songEagle // bind value to songEagle

p.saucxs // -> Get ‘saucxs’ = songEagle

如果上面代码格式出现问题，可以查看下面代码图片

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道

HTML

• HTML5有哪些新特性？

• Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

• 如何实现浏览器内多个标签页之间的通信？

• ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

• 简述⼀下src与href的区别？

• cookies,sessionStorage,localStorage 的区别？

• HTML5 的离线储存的使用和原理？

• 怎样处理 移动端 1px 被 渲染成 2px 问题？

• iframe 的优缺点？

• Canvas 和 SVG 图形的区别是什么？

JavaScript

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

• 问：0.1 + 0.2 === 0.3 嘛？为什么？

• JS 数据类型

• 写代码：实现函数能够深度克隆基本类型

• 事件流

• 事件是如何实现的？

• new 一个函数发生了什么

• 什么是作用域？

• JS 隐式转换，显示转换

• 了解 this 嘛，bind，call，apply 具体指什么

• 手写 bind、apply、call

• setTimeout(fn, 0)多久才执行，Event Loop

• 手写题：Promise 原理

• 说一下原型链和原型链的继承吧

• 数组能够调用的函数有那些？

• PWA使用过吗？serviceWorker的使用原理是啥？

• ES6 之前使用 prototype 实现继承

• 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

• 事件循环机制 （Event Loop）