前端面试题整理10

目录

1.Vue项目打包上线流程？

2.Vue中v-model的原理？

3.Vue中组件data为什么是个函数？全局是一个对象？

4.Vue中keepalive的缓存机制？

5.Vue中key的含义？

6.Vue 2中diff算法怎么运算的？

7.虚拟DOM和真实DOM的区别？

8.Vue中数组的那些操作监听不到？

9.Vue 组件传值方案有哪些？

10.Vue 组件的单项数据流怎么理解？

---

1.Vue项目打包上线流程？

①通过命令行工具进入Vue项目的根目录，运行命令npm run build，生成打包后的静态文件。

②将打包后的静态文件上传至服务器，可选择使用FTP或者其他文件上传工具。

③在服务器上安装Node.js环境，如果已经安装则跳过此步骤。

④安装HTTP服务器，例如Nginx或Apache等，用于将静态文件在Web服务器上进行部署。

⑤配置HTTP服务器的虚拟主机，将Vue项目的请求指向打包后的静态文件所在的目录。

⑥启动HTTP服务器，访问Vue项目的域名或IP地址即可查看项目。

2.Vue中v-model的原理？

v-model指令实际上是一个语法糖，它是将value属性和input事件绑定在一起，实现了双向数据绑定。当一个表单元素使用v-model指令时，它会监听input事件，然后将输入的值赋给组件实例的data对象中对应的属性。同时，当组件实例的data对象中对应的属性发生改变时，v-model指令会将新的值赋给表单元素的value属性，从而实现了数据的双向绑定。

3.Vue中组件data为什么是个函数？全局是一个对象？

因为组件是可以复用的，如果组件中的data是一个对象，那么多个组件实例将共享同一个对象，这样就会导致数据混乱的问题。而将data设置为一个函数，每个组件实例就会调用该函数，返回一个新的data对象，这样每个组件实例就都有自己独立的数据了。

全局的data是一个对象，因为全局只有一个Vue实例，不涉及到组件复用的问题。

4.Vue中keepalive的缓存机制？

keep-alive是Vue内置的一个组件，可以将其他组件缓存起来，避免多次渲染。当一个组件被包裹在keep-alive组件中时，它的状态就会被缓存起来，不会被销毁。当下次需要渲染该组件时，直接从缓存中获取即可，这样就可以大大提高组件的渲染性能。缓存机制是基于LRU算法实现的，当缓存满时，会将最近最少使用的组件销毁。

5.Vue中key的含义？

key是Vue中用来标识组件的唯一性的属性，它可以减少组件的重复渲染。当一个组件需要动态添加或删除时，Vue会根据key的变化判断组件是否需要重新渲染。如果key相同，则认为是同一个组件，不需要重新渲染；如果key不同，则认为是不同的组件，需要重新渲染。

6.Vue 2中diff算法怎么运算的？

Vue 2中的diff算法是通过深度优先遍历算法实现的。当更新一个组件时，Vue会先比较新旧节点的根节点是否相同，如果相同，则继续比较它们的子节点。如果子节点有顺序变化，则会尝试就地复用旧节点，而不是重新创建一个新节点。如果有新的节点，则会创建新节点并插入到旧节点的位置上。如果有节点被删除，则会直接删除对应的旧节点。

7.虚拟DOM和真实DOM的区别？

①虚拟DOM不会进行回流和重绘；真实DOM在频繁操作时会引起回流重绘，导致性能降低。

②虚拟DOM频繁修改，然后一次性对比差异并修改真实DOM，最后依次回流重绘，减少了真实DOM中多次回流重绘引起的性能损耗。

③虚拟DOM有效降低大面积的重绘与排版，因为是和真实DOM对比，更新差异部分，所以只局部渲染。

8.Vue中数组的那些操作监听不到？

在Vue中使用$watch或者watch选项来监听数组变化时，以下操作是无法被监听到的：

1. 直接通过下标设置数组元素，如arr[0] = val。
2. 使用length属性缩小数组长度，如arr.length = 0。
3. 使用splice方法删除数组元素，如arr.splice(0, 1)。

如果需要监听这些操作，可以使用Vue提供的Vue.set和Vue.delete方法来进行操作。例如，可以使用Vue.set(arr, index, val)来设置数组元素，使用Vue.delete(arr, index)来删除数组元素。这样就可以被监听到相应的变化了。

9.Vue 组件传值方案有哪些？

• 父子组件传值：可以通过props属性将父组件的数据传递给子组件。
• 子父组件传值：可以通过自定义事件将子组件中的数据传递给父组件。
• 兄弟组件传值：可以通过一个空的Vue实例作为中央事件总线，将兄弟组件中的数据传递给其他兄弟组件。
• Vuex：可以使用Vuex来管理组件之间共享的状态。

10.Vue 组件的单项数据流怎么理解？

Vue组件的单项数据流是指数据只能从父组件流向子组件，而不能反过来。这是为了避免组件之间的数据混乱和耦合。子组件可以通过props属性接收父组件传递的数据，但是不能直接修改这些数据。如果需要修改父组件中的数据，可以通过自定义事件将数据传递给父组件，由父组件来修改数据。这样就保证了数据的单向流动，使得组件之间的关系更加清晰和可维护。