node 面试题（node面试题面试必问）

大家好，我是讯享网，很高兴认识大家。

1、route和router区别？

\(router用来<span style="color:#ff9900;">操作路由</span>，\)route用来获取路由信息
\(router是<span style="color:#ff9900;">VueRouter</span>的一个<span style="color:#ff9900;">实例对象</span>，他包含了<span style="color:#ff9900;">所有的路由</span>，包括路由的跳转方法，钩子函数，子对象（例如history）<br /> \)route是一个路由信息对象，每一个路由都会有一个\(route对象，是一个<span style="color:#ff9900;">局部</span>的对象。</p> <hr /> <h4>2、vue自定义指令？</h4> <p>Vue中的核心内置指令不能够满足我们的需求时，我们定制自定义的指令用来满足开发的需求。<br /> 1、全局自定义指令<br /> 2、私有自定义指令（组件内定义指令）<br /> 主要目的是在Vue的模板中直接操作DOM。</p> <hr /> <h4>3、vue<strong>优化Vue项目的性能</strong>？</h4> <p>1、<span style="color:#be191c;"><strong>代码分割：</strong></span>使用Webpack的<span style="color:#ff9900;">代码分割</span>功能，按需加载组件<br /> 2、<span style="color:#be191c;"><strong>懒加载：</strong></span>对路由组件进行<span style="color:#ff9900;">懒加载</span>，减少初始加载时间<br /> 3、<span style="color:#be191c;"><strong>虚拟滚动：</strong></span>使用<span style="color:#ff9900;">虚拟滚动</span>技术，仅渲染可见区域的DOM节点（虚拟滚动其核心原理是只渲染用户当前可见区域的数据，而不是一次性渲染整个列表或数据集。这样做可以显著提高渲染效率，尤其是在数据量巨大时，能够避免性能下降和页面卡顿的问题）<br /> 4、<span style="color:#be191c;"><strong>减少重绘重排：</strong></span>合理使用CSS，避免<span style="color:#ff9900;">频繁的DOM操作</span>。（如：减少DOM节点，使用使用CSS的和属性等等）<br /> 5、<span style="color:#be191c;"><strong>使用keep-alive：</strong></span>对频繁切换的组件使用<span style="color:#ff9900;">keep-alive</span>，缓存组件状态</p> <hr /> <h4>4、vue模板如何编译？</h4> <p><strong><span style="color:#be191c;">1、解析</span></strong><br /> 将模板字符串解析成抽象语法树（AST）。这一步是通过一个解析器完成的，它会识别模板中的指令、插值、模板标签等，并构建出一个AST。<br /> 优化<br /><strong><span style="color:#be191c;">2、优化</span></strong><br /> 对AST进行静态分析和优化。例如，标记所有静态节点，以便在虚拟DOM的diff算法中可以快速跳过它们，减少不必要的DOM操作。<br /> 代码生成<br /><strong><span style="color:#be191c;">3、代码生成</span></strong><br /> 将优化后的AST转换成可执行的JavaScript代码。这一步会生成一个render函数，这个函数能够生成虚拟DOM树。</p> <hr /> <h4>5、Vue2响应式原理？</h4> <p>‌Vue2的响应式原理‌主要通过Object.defineProperty方法来实现。Vue2使用Object.defineProperty对组件的data对象的属性进行劫持（或称为拦截）。当读取data中的属性时触发get，当修改data中的属性时触发set，从而实现对数据的监控和响应式更新‌。</p> <hr /> <h4>6、Vue3响应式原理？</h4> <p>‌<strong>Vue3的响应式原理</strong>‌主要基于JavaScript的Proxy对象，通过数据代理和动态劫持来实现数据的响应式更新。在Vue3中，响应式系统通过Proxy对象来监视数据的变化，并在数据变化时自动更新视图，无需手动操作DOM。</p> <hr /> <h4>7、刷新浏览器后，Vuex的数据是否存在？如何解决？</h4> <p>刷新浏览器后，Vuex的数据会丢失，因为Vuex的状态是保存在<span style="color:#ff9900;">运行内存</span>中的，当页面刷新时，内存中的数据会被清除。页面刷新会重载vue实例，导致store里的数据丢失。</p> <h5>解决方法1：使用vuex-along</h5> <h5>解决方法2：localStorage 或者 sessionStroage</h5> <hr /> <h4>8、vue双向数据绑定原理？</h4> <p>vue的双向绑定，即数据与视图的响应式设计。具体表现为：View 的改变能实时让Model发生变化，而 Model 的变化也能实时更新 View。</p> <p><strong><span style="color:#be191c;">初始化：</span></strong><br /> Vue 在初始化组件时，会遍历数据对象，使用 Object.defineProperty 将每个属性转换为 getter/setter。<br /><strong><span style="color:#be191c;">依赖收集：</span></strong><br /> 当组件渲染时，Vue 会追踪哪些数据被用到了，即收集依赖。<br /><span style="color:#be191c;"><strong>依赖变更通知：</strong></span><br /> 当数据变化时，setter 会被触发，Vue 会通知所有依赖于这个数据的组件。<br /><span style="color:#be191c;"><strong>视图更新：</strong></span><br /> 组件收到通知后，会重新渲染，生成新的虚拟DOM，并与旧的虚拟DOM进行比较，更新实际的DOM。<br /><strong><span style="color:#be191c;">事件处理：</span></strong><br /> 对于表单输入，Vue 会监听 input 事件，并在事件处理函数中更新数据，实现双向绑定。</p> <hr /> <h4>9、computed和watch区别？</h4> <p>1、computed是<span style="color:#ff9900;">计算属性</span>；watch是<span style="color:#ff9900;">监听</span>，监听data中的数据变化。<br /> 2、computed支持缓存，当其<span style="color:#ff9900;">依赖的属性值</span>发生变化时，计算属性会<span style="color:#ff9900;">重新计算</span>，反之，则使用<span style="color:#ff9900;">缓存</span>中的属性值；watch不支持缓存，当对应属性发生变化的时候，响应执行。<br /> 3、computed<span style="color:#ff9900;">不支持异步</span>，有异步操作时无法监听数据变化；watch支持异步操作。<br /> 4、computed第一次加载时就监听；watch默认第一次加载时不监听。</p> <hr /> <h4>10、vue中mixin？</h4> <p>Mixin是面向对象程序设计语言中的类，提供了方法的实现。<br /> 本质其实就是一个js对象，它可以包含我们组件中任意功能选项，如data、components、methods、created、computed等。</p> <hr /> <h4>11、Vue中给对象添加新属性时，界面不刷新怎么办?</h4> <p>vue2是用过<span style="color:#ff9900;">Object.defineProperty</span>实现数据响应式， 当我们<span style="color:#ff9900;">访问</span>foo属性或者<span style="color:#ff9900;">设置</span>foo值的时候都能够触发setter与getter。<br /> 但是我们为obj添加新属性的时候，却无法触发事件属性的拦截<br /> 原因是一开始obj的foo属性被设成了<span style="color:#ff9900;">响应式数据</span>，而bar是后面新增的属性，并没有通过Object.defineProperty设置成响应式数据。</p> <pre></pre> <h6><span style="color:#be191c;">解决方法：</span></h6> <p><span style="color:#0d0016;">Object.assign()<br /> 直接使用Object.assign()添加到对象的新属性不会触发更新。应创建一个新的对象，合并原对象和混入对象的属性。</span></p> <hr /> <h4>12、vue组件通讯方式？</h4> <p>1、通过<span style="color:#ff9900;">props</span>传递‌：父组件通过props向子组件传递数据。子组件通过props接收父组件传递的数据。这种方式适用于父子组件之间的通信‌。</p> <p>‌2、通过<span style="color:#ff9900;">emit</span>触发自定义事件：子组件通过emit触发一个事件，父组件监听这个事件来接收数据。这种方式适用于子组件向父组件传递数据‌。</p> <p>3‌、使用<span style="color:#ff9900;">ref‌</span>：父组件可以通过\)refs直接访问子组件的实例，从而调用子组件的方法或访问其数据。这种方式适用于父子组件之间的直接交互‌。

4‌、EventBus（全局事件总线）‌：通过创建一个事件总线，实现非父子关系的组件之间的通信。这种方式适用于兄弟组件或跨多级的组件通信‌。

‌5、Vuex‌：Vuex是一个状态管理库，适用于大型应用中组件间的状态管理。通过改变状态来通知其他组件更新‌。

6‌、provide/inject‌：provide和inject可以实现跨级组件的数据传递。provide在祖先组件中提供数据，inject在后代组件中注入数据‌。

7‌、attrs/listeners‌：attrs用于父传子，子传孙的情况；listeners用于孙传子的反向通信。这种方式适用于祖先与后代组件之间的数据传递‌。

8‌、插槽（Slots）‌：插槽用于父组件向子组件插入内容，也可以用于子组件向父组件传递数据‌。

‌9、路由传参‌：通过路由的params和query参数进行组件间的数据传递。这种方式适用于通过路由进行的数据传递‌。

讯享网

1、行内元素有哪些？块级元素有哪些？空元素有那些？行内元素和块级元素有什么区别？

行内元素：
<span>、<a>、<img>、<br>、<strong> 、<b>、<em> 、<i>、<input>、<label>、<select> 、 <option>
块级元素：
<div>、<p>、<hr> 、<h1> 到 <h6> 、<ul>、<ol> 、<li> 、<table>、<thead>、<tbody>、<tfoot>、<tr>、<th> 、<td>
空元素：
<br>、<img>、<input>、<meta>、<link>、<hr>
区别：
行内元素不可以设置宽高，不独占一行
块级元素可以设置宽高，独占一行

2、简述一下你对HTML语义化的理解？

语义化是指根据内容的结构（内容语义化），选择合适的标签（代码语义化）
语义化的好处：
1、语义化使代码结构清晰，语义明确。更具可读性，便于个人和团队开发和维护
2、屏幕阅读器和其他辅助技术可以更好地传达语义化的 HTML，从而帮助视障用户等残障人士更好地访问网页内容。
3、语义化有利于SEO，有助于提高网站的搜索引擎排名。

3、标签上 title 与 alt 属性的区别是什么？

alt 是给搜索引擎识别，在图像无法显示时的替代文本；
title 是关于元素的注释信息，主要是给用户解读。当鼠标放到文字或是图片上时有 title 文字显示。

4、什么是优雅降级渐进增强？

是Web设计和开发中常用的两种策略，

渐进增强：从最基本的功能开始构建应用，然后逐步添加更高级的功能和效果，以提供更好的用户体验。这种策略首先确保所有用户都能访问基本的内容和功能，然后为使用更高级浏览器或设备的用户提供增强的体验。
优雅降级：是从完整的功能开始构建应用，然后针对低版本浏览器进行兼容，确保即使在旧版浏览器或设备中也能提供基本的可用性。这种策略意味着在高级浏览器中实现丰富的功能，而在低版本环境中逐步减少功能，以确保核心内容和功能始终可用。