2023年个人js前端面试题

1、三个div，怎么实现在一行上，并且两端间隔10px ,div之间间隔8px
答：三个div给浮动，或者给父元素设置flex布局，然后，设置三个div margin-left 间距 8px， 再分别给first-child 和 last-child 设置10px

2、vue中组件传值都有哪些方式
父组件通过props 传值和定义自定义事件给子组件，子组件通过$emit 调用自定义事件传参数给父组件
非父子组件之间传值，通过空vue实例作为事件中心，eventbus，触发和监听事件，实现任何组件之间通信
还有状态管理 vuex ，全局state 存放数据，修改数据用 mutation 异步修改用action 根据state变化渲染视图

3、vue声明周期，以及接口调用一般写在哪里？是否可以写在mounted中？
可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端返回的数据进行赋值
mounted 是页面已经渲染完成了，template已经render函数渲染成了html，这个时候再进行数据请求，很有可能会造成页面闪屏

4、jquery哪些方式可以让一个元素隐藏
hide() 本质是 display none 或者直接 修改css display 为none 或者 修改css visibility 为 hidden

5、v-if和v-for的优先级
在vue2中，v-for的优先级是高于v-if的，如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能；另在vue3则完全相反，v-if的优先级高于v-for,所以v-if执行时，它调用的变量还不存在，就会导致异常。

6、动态表单怎么做，以及动态表单的校验

vue的话，提取需要的功能封装成组件，比如文本，单行数字，多行文本，上传资源等，使用vue动态组件 component 渲染组件，表单验证是prop属性
jquery的话，根据条件 for循环生成表单中input标签，然后绑定验证规则

7、css可实现变换的属性有哪些

transform 变形
translate 移动
scale 缩放
origin 改变位置
skew 倾斜

8.jquery怎么实现异步调用，以及跨域的问题
jquery封装的四个ajax方法
1.模拟script src属性 标签 datatype jsonp getjson 就是对 jsonp的简单封装
2，webpack打包工具 配置代理 proxyTable

9、闭包是什么? 闭包的用途?
闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的常见方法就是在一个函数内部创建另一个函数，创建的函数可以访问到当前函数的局部变量，可以通过这种方式来创建私有变量，另一个作用是使已经结束运行的函数上下文的变量继续留在内存中，因为闭包函数保留了变量的引用，所以这个不会被回收

10、简述事件循环原理
事件循环包括，任务队列用于存储异步任务；执行栈存储同步任务；事件循环机制不断循环执行任务队列中的异步任务，将其加入执行栈中执行；当任务队列中存在多个异步任务，优先级高的任务会先进入执行栈；当执行栈中存在阻塞任务，事件循环将暂停，等待阻塞任务执行完毕再继续；事件轮询用于检测任务队列是否有新任务，将其加入执行栈中执行；事件循环存在两种任务，宏任务和微任务，微任务在宏任务之后执行，确保最小延迟时间 settimeout 是宏任务

11、虚拟dom的实现原理与优缺点
虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象，状态变更时，通过diff算法查找出差异，更新dom树，优点，无需手动操作dom元素，提高开发效率，跨平台在服务端渲染，移动端开发。缺点是在一些性能要求极高的应用中 无法进行极致优化比如vscode才用手动操作dom的方法进行极端性能优化

12、vue 和 react 在虚拟dom的diff上，做了哪些改进使得速度很快?
vue和react的diff算法，都是忽略跨级比较，只做同级比较。vue diff时调动patch函数，参数是vnode和oldVnode，分别代表新旧节点。
vue对比节点。当节点元素相同，但是classname不同，认为是不同类型的元素，删除重建，而react认为是同类型节点，只是修改节点属性。
vue的列表对比，采用的是两端到中间比对的方式，而react采用的是从左到右依次对比的方式。当一个集合只是把最后一个节点移到了第一个，react会把前面的节点依次移动，而vue只会把最后一个节点移到第一个。总体上，vue的方式比较高效

13、vue 和 react 里的key的作用是什么? 为什么不能用Index？用了会怎样? 如果不加key会怎样?
key的作用就是更新组件时判断两个节点是否相同。相同就复用，不相同就删除旧的创建新的。
比如改变dom元素的顺序，第一个index永远是0所以不能标识是否相同，

14、vue 双向绑定的原理是什么?

• 响应式处理整体过程为initState() => initData() => observe()
• 其中observe是响应式处理的入口，通过该方法为data对象转化为响应式对象。vue2中用 objuct.defineProperty vue3中用porxy
• Observer类中判断该value是数组还是对象，进行不同的处理
  • 数组的响应化处理，是重写push,pop,sort等会修改原数组的方法，调用对应的notify.然后遍历数组中的成员，判断其类型决定是否调用observe方法
  • 对象的响应化处理，会调用walk方法，遍历对象中的每个属性，调用defineReactive
• defineReactive的核心是为每一个属性定义getter和setter,getter中收集依赖，setter中派发更新,即调用dep.notify。
• dep.notify()会调用watcher的update()方法。如果该watcher未被处理，会被添加到queue队列中，并调用flushSchedulerQueue()方法，该方法会触发对应的钩子函数以及调用watcher.run()更新视图。

15、vue 的keep-alive的作用是什么？怎么实现的？如何刷新的?
keep-live组件是 vue 的内部组件，主要用于缓存内部组件实例。这样做的目的是 keep-alive 内部组件切换时，不需要重新创建组件实例，在具体实现上，keep-alive 在内部维护了一个 key 数组和一个缓存对象

16、vue 是怎么解析template的? template会变成什么?
template最终会变成html代码，通过ast抽象语法树，是源码的抽象语法结构的树状表现形式

17、vue如何解析指令? 模板变量? html标签
根据不同的指令相应处理，比如插值表达式，用正则匹配插值表达式中的值，v-text指令就用node.textcontent 设置值； v-model指令就注册input时间，实现数据双向绑定