WebGIS开发面试题：前端篇（五）

本系列内容主要介绍webgis开发过程中可能会遇到的常见面试题和答案，从前端到二维到三维，干货满满。记得关注我不走丢！

需要更多面试题、视频讲解、webgis教程的宝子戳↓↓↓
GIS学习

前几期内容点击下方链接：
WebGIS开发面试题：前端篇（一）
WebGIS开发面试题：前端篇（二）
WebGIS开发面试题：前端篇（三）
WebGIS开发面试题：前端篇（四）

1、Vue

1、Vue 2和Vue 3的路由有什么不同？

1、Vue2的路由挂载到组件实例上，而Vue3的路由,不管跳转还是接收参数都需要按需导⼊

2、路由创建⽅式不⼀样：
Vue2中，通过 new VueRouter 来创建路由实例

import VueRouter from 'vue-router' 
const router = new VueRouter({ ... })

Vue3中，可以直接使用 createRouter() 函数来创建⼀个路由实例

import {createRouter} from 'vue-router'

2、vue3能监听数组吗?怎么监听? watch的第一个参数是什么

Vue3中可以通过监听数组的方式来检测数组的变化，它提供了两种方式来实现这一功能:使用watch或使用computed。
使用watch监听数组，需要使用$watch函数来监听数组，它的用法与监听对象相同，第一个参数是要监听的数组，第二个参数是回调函数，用于处理数组变化时的逻辑操作。需要注意的是，在Vue3中，需要将watch函数放在onMounted函数中才能起作用。其中，第一个参数为要监听的数组，第二个参数为回调函数，第三个参数为可选的选项，其中deep:true表示深度监听，可以监听数组内部元素的变化。另外，watch的第一个参数不一定要是数组，也可以是任何一个应式对象。而watch的第一个参数是要监听的属性或表达式，当被监听的属性或表达式发生变化时，watch回调函数会被触发，并传递两个参数:新值和旧值。

3、v-for和v-if为什么不能一起使用

Vue2
在 Vue.js 中，v-for 和 v-if 是两个非常常用的指令，用于在模板中渲染列表和控制元素的显示。然而,Vue.js 中不允许在同一个元素上同时使用 v-for 和 v-if 指令，这是因为这两个指令的执行顺序和结果可能会互相影响，导致不可预料的结果。
具体原因如下:
1.v-for 比 v-if 的优先级高:当使用 v-for 和 v-if 指令时，Vue.js先执行 v-for，然后才执行 v-if因此，如果在 v-if 中使用了在 v-for 中定义的变量，那么在执行 v-if 时，这些变量可能还没有定义，导致 v-if 的条件判断出错。
2.v-for 会覆盖 v-if 的结果:当使用 v-for 和 v-if 指令时，v-for 可能会覆盖 v-if 的结果。例如,当列表中没有满足 v-if 条件的元素时，v-if 会将整个列表隐藏。但是，如果 v-for 中定义的列表数据为空，那么 v-if 的条件判断就会失效，导致列表仍然显示出来。因此，为了避免这些问题，Vue.js 不允许在同一个元素上同时使用 v-for 和 v-if 指令。如果需要在模板中同时使用这两个指令，可以将它们放在不同的元素上，或使用计算属性来过滤列表数据。

4、vue和mvvm

是的，Vue.js 框架完全实现了 MVVM(Model-View-ViewModel)模式。在 Vue.js 中，模型(Model)对应着组件中的数据，视图(View)对应着组件中的模板，而视图模型ViewModel)则对应着 Vue.js 实例。
具体来说，Vue.js 框架中的 ViewModel 主要包含以下几个方面的功能:
1.数据绑定:Vue.js 提供了数据绑定的功能，将组件中的数据和模板中的视图控件绑定在一起。当组件中的数据发生变化时，视图会自动更新。
2.模板语法:Vue.js 提供了一套简洁明了的模板语法，支持数据绑定、条件渲染、循环渲染等常见的模板功能。
3.计算属性和侦听器:Vue.js 提供了计算属性和侦听器的功能，用于处理组件中的复杂逻辑和数据变化的监听。
生命周期钩子:Vue.is 提供了一系列的生命周期钩子函数，用于在组件创建、更新和销毁等不同的4.生命周期阶段执行相关的逻辑。
综上所述，Vue.js 框架完全实现了 MVVM 模式，并且通过数据绑定、模板语法、计算属性、侦听器和生命周期钩子等一系列功能，使得开发者可以更加轻松地构建和维护复杂的交互式应用程序。

5、v-if和v-show

在Vue.js中，v-if和v-show都是用于控制DOM元素显示和隐藏的指令，但它们的实现方式有所不同，因此在不同的情况下，可以根据需求选择使用哪个指令。
v-if指令是一种条件渲染指令，它根据指定的表达式的结果来判断是否渲染对应的DOM元素。如果表达式的结果为真，则渲染对应的DOM元素;如果表达式的结果为假，则不染对应的DOM元素。v-if指令在渲染的时候会销毁或重新创建DOM元素，因此如果一个元素只是偶尔需要被显示，使用v-if指令可以提高性能。
v-show指令也用于控制DOM元素的显示和隐藏，但它不会销毁DOM元素，而是通过设置DOM元素的display样式来实现显示和隐藏。如果指定的表达式的结果为真，则显示对应的DOM元素，否则隐藏DOM元素。v-show指令在需要经常切换显示和隐藏的元素时更为适用，因为它不会重复创建DOM元素，而是直接修改样式，因此可以提高性能。
因此，如果需要根据条件动态地添加或删除DOM元素，可以使用v-if指令;如果需要频繁地切换元素的显示和隐藏状态，可以使用v-show指令。