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

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

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

1、Vue

Vue2 vs Vue3

1、Vue3相对于Vue2，最核心的是多了⼀个组合式API。

编辑

Vue2的缺陷，组件的业务逻辑过于复杂的情况，代码的逻辑分散到各处，代码比较混动。

2、多了⼀个新的组件Teleport,Suspense
3、组件中可以定义多个根节点
4、组件中是按需导入的Tree Shaking支持(ES Module)

Vue3不会将所有的API都打包进来，只会打包你用到的API。

5、⽣命周期会有不同

6、计算，监听，keep-alive语法堂都不⼀样了

7、定义响应式的方法不同

vue2 和vue 3的生命周期

⽣命周期函数，就是Vue在某⼀点自动执行的函数。

编辑

2、Vue3中的setup语法糖的优势

Vue3中的setup语法糖是⼀个新特性，它提供了⼀种新的方式来编写Vue组件。它的优势主要包 括：

1. 更加简洁的代码：使⽤setup语法糖，可以将组件选项分为两部分，⼀部分是props、data、 computed、watch等选项，另⼀部分是⽣命周期钩⼦函数。这样可以使代码更加简洁易懂。
2. 更加灵活的组件选项：在setup中可以使用响应式数据、计算属性、watch等，这样可以让组 件选项更加灵活，也可以更好地实现复杂的业务逻辑。
3. 更加清晰的逻辑分离：使用setup语法糖可以更好地将组件的逻辑分离，使得组件的数据和逻 辑更加清晰明了，便于维护和开发。
4. 更好的性能：由于Vue3中使用了Proxy来实现响应式数据，setup语法糖可以更好地利用Proxy 的优势，提⾼组件的性能。
   综上所述，Vue3中的setup语法糖提供了更加简洁、灵活、清晰和⾼性能的方式来编写Vue组件， 可以帮助开发者更加⾼效地开发和维护Vue应用。

3、ref vs reactive

仅从代码层⾯讨论
1、ref只可以定义单个响应式数据
2、reactive可以定义多个响应式数据，和Vue2中的data类似

死死记住：ref本质也是 reactive，ref(obj)等价于 reactive({value: obj})

• vue3中实现响应式数据的方法是就是使用ref和reactive，所谓响应式就是界面和数据同步，能实现实时更新。

• vue2中响应式是通过defineProperty实现的，vue3中是通过ES6的Proxy来实现的。

<template> 
<div></div> 
</template> 
<script setup > 
import { ref, isRef, reactive } from "vue"; 
const count = ref(10); 
const state = reactive({ 
value: 20, 
}); 
console.log(count.value); 
console.log(isRef(count)); 
console.log(state.value) 
</script> 
<style scoped> 
</style>

编辑

编辑

**4、vue3如何设置全局变量**

注意，使用全局变量是有⼀定的⻛险的，因为它们可能被不同的组件或库使用，并且可能会被不小 心覆盖或修改。因此，应该谨慎使用全局变量，最好将它们限制在必要的范围内。

1、app.config.globalProperties
要设置Vue 3全局变量，可以使用Vue 3提供的createApp方法

1、main.js

import { createApp } from 'vue' 
import App from './App.vue' 
const app = createApp(App); 
app.config.globalProperties.$http = 'Hello, world!' 
app.mount('#app')

2、组件中使用

<template>App</template> 
<script setup> 
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance(); 
console.log(proxy.$http) 
</script>

2、provide - inject

main.js

const app = createApp(App); 
app.provide("$http","http") 
app.mount('#app') 
<template> 
<div>App</div> 
</template> 
<script setup> 
import { inject } from 'vue'; 
const http = inject("$http"); 
console.log(http) 
</script>

3、Vue和ol

1、设置原型

/* 定义原型 */ 
export const prototype = app.config.globalProperties;

2、在组件中设置原型属性的值

<template> 
<div id="map"></div> 
</template> 
<script setup> 
import { onMounted } from "vue"; 
import { gaode } from "../map_libs/gaode"; import { prototype } from "../main"; //重要 onMounted(() => { 
/* Pinia  全局对象 */ 
const map = new ol.Map({ 
target: "map", 
layers: [gaode], 
view: new ol.View({ 
projection: "EPSG:4326", 
center: [114.3, 30.5], 
zoom: 4, 
}), 
}); 
prototype.$map = map; //重要 
}); 
</script>

3、封装获取全局属性的工具函数

可以帮助我们更好的获取Map,这个函数建议放置自动导包中

/* 推荐放到⾃动导包中 */ 
import { getCurrentInstance } from 'vue' 
function useGlobalMap() { 
const { proxy } = getCurrentInstance(); 
/* getCurrentInstance().appContext.config.globalProperties.$map */ return (proxy.$map); 
} 
export { useGlobalMap };

4、组件中使用全局Map

<template>control</template> 
<script setup> 
import {  onMounted } from "vue"; 
import { useGlobalMap } from "../utils/globalMap"; onMounted(() => { 
console.log(useGlobalMap()); 
}); 
</script>

5、Vuex和Pinia有什么区别，那个更好用？

Vuex 和Pinia 都是用于Vue.js 应用程序状态管理的库，它们的主要目的是将应用程序状态集中管 理，使得应用程序的状态变得可预测和可维护。然而，它们在实现上存在⼀些不同。
以下是Vuex 和Pinia 的⼀些区别：

1. Vuex 是Vue.js 官方提供的状态管理库，而Pinia 是社区驱动的状态管理库。
2. Vuex 使用单⼀的全局状态树来管理整个应用程序的状态，而Pinia 使用多个独立的状态存储 来管理状态，每个存储都可以包含自己的状态、getter、mutation 和action。
3. 在Vuex 中，所有的状态、mutation 和action 都是全局的，任何组件都可以直接访问它们。 而在Pinia 中，状态存储只能通过组件实例来访问和修改，这使得状态变得更加可控和预测。
4. 在使用Vuex 时，需要先创建⼀个store，然后将它注入到根 Vue 实例中。而在使用Pinia 时，不需要创建⼀个全局的store，而是可以在组件内部直接使用状态存储。
5. Pinia 支持TypeScript，它提供了更好的类型支持和自动化类型推断。
   总之，Vuex 和Pinia都是⾮常优秀的状态管理库，具体选择哪⼀个取决于项目的需求和开发者的 个⼈喜好。

1、Vuex

编辑

**2、Pinia **

核心概念

1、State
2、Getter
3、Action

代码实现：

import { ref, computed } from 'vue' 
import { defineStore } from 'pinia' 
export const useCounterStore = defineStore('counter', () => { const count = ref(0) 
const doubleCount = computed(() => count.value * 2) function increment() { 
count.value++ 
} 
return { count, doubleCount, increment } 
})