兴业数金笔试加一面详解：（没过，只是给大家点建议）

一、笔试部分

笔试部分：前面是较为基础的Html和css以及JavaScript知识的选择填空，基础没什么大问题基本都可以过，我也有蛮多不会

最后一题是一道编程题，支持很多语言C/C++/python/java等等总之能写出来就好，题目难度是比较基础的，不过我太久没写当时也浪费了不少时间。

二、技术面试

有两个面试官：

第一个，主要问的是和项目相关的问题，比如vue使用中会使用到的一些方法等，这个面试官问的是偏项目方向的，只要是真的做过一点，应该都没什么问题。

第二个，第二个面试官问的是技术层面，难度偏高，对于喜欢研究的同学来说应该没什么难度，不过我当时很多没答上来，我以为会用就够了没有探究底层原理。

1.IE和W3C盒子模型有什么不同：

1. W3C盒子模型范围包括margin、border、padding、content，并且content部分是不包含其他部分的。
2. IE盒子模型范围也包括margin、border、padding、content，但是IE盒子模型的content部分包含了border和padding。

2.diff算法的具体实现：（当时应该就是想问我什么时候会进行diff什么时候不会，我回答的不好）

        

1. 如果是同一节点下adcd后加个e会最小量更新，但是如果在前面加就不一定了，如果没有唯一标识key，那么他不会最小化更新会重新搭建，如果加了的话就会最小化更新
2. 如果ul改成ol也不会进行最小量更新，因为他们不是同一个节点了，当选择器相同key相同才是同一节点，进行patch时候就会精细化比较，否则暴力拆迁。
3. 只进行同层比较不进行跨层比较，div里面多一个section和div比较不能进行精细化比较而是暴力拆除，因为多了个section就属于不同层了。

     总结就是：①同一节点下顺序更新是最小化，如果逆序了需要看有没有key值，有则最小量，无则暴力拆除②需要选择器和key都相同的时候才会进行最小量更新③只进行同层比较不进行跨层比较

3.Vue2和3实现数据双向绑定的原理：

①Vue2：

对象类型：通过object.defineProperty()中的get和set对属性进行读取、修改进行拦截（数据劫持）

数组类型：通过重写数组的一系列方法来实现拦截（对数据变更方法进行了包裹，比如push等）

存在问题：新增属性、删除属性，界面不会更新

直接通过下标修改数组，界面不会自动更新

②

Vue3：

贴士：proxy本身就能进行数据代理并且完成增删改查，但是为什么要写get，set，delete，新增属性时候也会调用set，这些的目的就是捕获到数据的改变，这样才能完成响应式。

通过proxy（window内置的属性）（概念就是代理）进行数据代理，这个时候就能使用get、set（修改或者新增）、deleteProperty监测到数据的修改，然后通过reflect反射对象对原数据进行增删改查。

4.组件化的概念和优势：（答案转载别人的，我当时的回答没有这么全面比较简单）

高内聚性：

组建功能必须是完整的，如我要实现下拉菜单功能，那在下拉菜单这个组件中。就把下拉菜单所需要的所有功能全部实现。

低耦合度：

代码独立不会和项目中的其他代码发生冲突。在实际工程中，我们经常会涉及到团队协作，传统按照业务线去编写代码的方式，就容易相互冲突，所以运用组件化方式就可大大避免这种冲突的存在、每一个组件都有子集清晰的职责，完整的功能， 较低的耦合便于单元测试和重复利用。

标记鲜明，容易维护：

组件化后，我们只需要对对应的组件进行维护，不会影响到其它文件。而且文件结构清楚，方便后台人员的使用。

块状化结构，并且方便扩展：

提高开发效率、方便重复使用、简化调试步骤、提升整个项目的可维护性、便于协同开发

5.id属性的必要性：（我现在都没特别明白，我认为是唯一标识的作用，无法解答大家只能把问题抛出）