前端面试题（持续更新中）

1，在vue3中，使用reactive定义的引用数据类型，被重新赋值后，数据不是响应式的原理？

原理：当使用reactive定义一个对象时，Vue会将这个对象转换为一个响应式代理对象。这个代理对象会拦截对对象属性的访问和修改操作，并在需要时触发更新。但是，当你重新给这个对象赋值时，实际上是改变了这个对象的引用，而不是修改了对象的属性。因此，Vue无法检测到这个变化，也就无法触发更新。

解决办法：1、使用ref定义数据。

                  2、使用reactive定义一个对象，把要使用的数据赋值给这个对象的某一个属性中，达到数据的响应式。

2、在vue3中在package-lock.json文件中dependencies和devDependencies的区别？

dependencies和devDependencies是在Node.js项目中使用的两个不同的字段，用于指定项目所依赖的软件包。

1. dependencies配置的是生产环境，安装项目运行时所依赖的模块。比如jQuery库，等项目上线以后依然是要继续使用的，我们就要安装在生产环境中，如果没有把需要的依赖安装到生产环境中，项目上线运行时就有可能会报错。使用 --save 命令安装到 dependencies 下

2. devDependencies 配置的是开发环境，安装项目开发时所依赖的模块。比如像webpack工具，只是用来构建项目和打包，这些都是在开发阶段才使用的，等项目上线后就用不到webpack工具了，那么就可以把webpack安装到开发环境中，使用 --save-dev 命令安装到devdependencies下。

• 总结

配置项	dependencies	devDependencies
dependencies	–save 简写 -S	生产环境，管理的依赖包在项目上线后依然有效
devDependencies	–save-dev 简写 -D	开发环境，管理的依赖包仅在开发阶段有效

3、组件通信的几种方式：

1.props和$children与$parent
        适用场景：父子组件通信

2.自定义事件
        适用场景：子组件给父组件通信
        $on与$emit

3.全局事件总线 $bus
        适用场景：万能
        Vue.prototype.$bus=this;
        $emit发布事件，$on监听事件

4.pubsub-js
        适用场景：万能
        React框架中使用比较多，套路：发布与订阅

5.Vuex
        适用场景：万能

6.插槽
        适用场景：父子组件通信
        三种：默认插槽、具名插槽、作用域插槽

4、一种特别的组件通信provide 和inject？

这种方式就是vue中依赖注入，该方法用于 父子组件之间 的通信。当然这里所说的父子不一定是真正的父子，也可以是祖孙组件，在层数很深的情况下，可以使用这种方式来进行传值。就不用一层一层的传递数据了。

provide和inject是vue提供的两个钩子，和data、methods是同级的。并且provide的书写形式和data一样。
注意： 在vue2中依赖注入所提供的属性是非响应式的。

这是因为Vue 2中的响应式系统是基于组件实例的，而provide和inject是在组件实例化之前就进行的数据传递。因此，子组件在创建时会直接获取到provide中的数据，但是后续对provide中数据的修改不会触发子组件的重新渲染。在Vue 3中，provide和inject已经支持响应式数据的传递。不必担心这个问题。

css方面：

1，px、rem 、em、vw、vh、百分比的区别？

 1、px

                px就是pixel（像素）的缩写，相对浏览器的分辨率而言。

2、em

        相对单位，参照物是父元素的font-size字体大小，具有继承性，如果自身定义了font-size属性，就按照自身来计算，如果自身没有设置字体大小，就会继承父元素的字体大小。如果所有的父元素没有设置字体大小，那么就按照浏览器默认的字体大小（16px），此时1em=16px。

3、rem

        相对单位，永远相对于根元素的font-size的变化而变化。

4、vw/vh 

        vm、vh、vmin、vmax是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。

vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vh：视窗高度的百分比

  结论：vw、vh是一个动态的单位，会随着视口的变化而变化（相对单位）。
vmin：取当前Vw和Vh中较小的那一个值
vmax：取当前Vw和Vh中较大的那一个值

 使用场景：保证移动开发中屏幕旋转之后尺寸不变。

5、百分比

        % 百分比，相对长度单位，相对于父元素的百分比值

总结：

 px：绝对单位，页面按精确像素展示

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值

rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算

vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单

react

1、声明式编程和命令式编程？

        一、声明式编程：描述了一个结果，一个状态，重视描述的结果，忽略过程细节，典型的就是 HTML CSS.

        举例子：你只要看见代码就知道最后的结果，就是声明式编程。

                       如果看见代码要去分析，脑子里去运行一遍代码，那就是命令式

        二、命令式编程：他描述过程，细节、步骤、而对结果不太在意，典型的就是javaScript.

2、npx和npm的区别？

       npx是npm v5.2.0引入的一条命令，是一个npm包执行器。可以直接使用命令，临时安装包，并执行，不会全局安装，npx 会安装最新的稳定版本，也可以切换node.js版本。

       npm是node.js的包管理器。主要用于全局安装和管理包，也可以进行本地安装，npm需要全局安装命令工具才能使用命令。

npm主要用于包管理和依赖管理，而npx主要用于临时执行命令。npx的出现解决了在命令行中执行包命令时需要全局安装的问题，可以节省时间和磁盘空间，并提供更好的灵活性和版本管理。
 

3、组件化和模块化？

       模块化，是把一个大的js文件按照功能或逻辑，分成一个个小的js文件，这些小的js 文件，互相配合，提高的代码的可维护性，灵活性，扩展性。

        组件化：是把一个大的web页面，按照结构，来拆分成一个一个小的页面，实现的代码的复用性，灵活性，便于维护。