当前位置： 首页 > news >正文

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

news 2025/5/14 7:02:18

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

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

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

1、Vue插槽

简单的理解一下，就是预留了一个可以替换的地方，
在父组件调用子组件的时候，如果想要在子组件的标签体中写一些的内容，不使用插槽是无法显示
的。
一、作用域插槽
https://blog.csdn.net/weixin 40923809/article/details/101782454
1.1 定义
作用域插槽其实就是带数据的插槽，即带参数的插槽，简单的来说就是子组件提供给父组件的参数，该参数仅限于插槽中使用，父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。
1.2 编译作用域
父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子集作用域内编译。

举个例子：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<title>Document</title> 
<script src="../node_modules/vue/dist/vue.js"></script> 
</head> 
<body> 
<div id="app"> 
<button v-show="isShow">按钮</button> 
<son></son> 
</div> 
<template id="tmp"> 
<div> 
<h3>我是⼦组件</h3> 
<button v-show="isShow">⼦组件按钮</button> 
</div> 
</template> 
<script> 
const vm = new Vue({ 
el: '#app', 
data: { 
// ⽗组件的isShow 
isShow: false, 
}, 
components: { 
son: { 
template: '#tmp', 
data() { 
return { 
// ⼦组件的isShow 
isShow: true, 
} 
}, 
}, 
}, 
}) 
</script> 
</body> 
</html>

此时子组件的按钮会显示，而父组件的按钮不进行显示，

  • 如果在父模板中使用 isShow，访问的是父组件 data 中的值

  • 如果在子模板中使用 isShow，访问的是子组件 data 中的值

通过上述示例，我们可以发现，在父组件中是不能直接访问子组件中的状态的，那么如何解决这个问题?

1.3 作用域插槽的使用
使用了作用域插槽之后可以利用传值的方式来访问子组件中的变量。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<title>Document</title> 
<script src="https://lib.baomitu.com/vue/2.6.14/vue.js"></script> 
</head> 
<body> 
<div id="app"> 
<button v-show="isShow">按钮</button> 
<!-- 通过v-slot指令找名字为default的插槽, 并指定prop对象对应default插槽 -- > 
<son> 
<template #default="prop"> 
<!-- 通过prop对象访问show属性, 相当于访问了⼦组件的isShow --> 
<button v-show="prop.show">⼦组件按钮</button> 
</template> 
<template #left="left"> 
<h3>{{left.info.name}}</h3> 
</template> 
</son> 
</div> 
<template id="tmp"> 
<div> 
<h3>我是⼦组件</h3> 
<!-- 在slot:default对象中, 定义⾃定义属性show --> 
<slot :show="isShow"></slot> 
<slot name="left" :info="stu"></slot> 
</div> 
</template> 
<script> 
const vm = new Vue({ 
el: '#app', 
data: { 
isShow: false, 
}, 
components: { 
son: { 
template: '#tmp', 
data() { 
return { 
isShow: true, 
stu: { 
name: 'xiaoming', age: 18, 
}, 
} 
}, 
}, 
}, 
}) 
</script> </body> 
</html>

当子组件中的isShow为false的时页面展示如下：

2、vue-router

1、如何实现动态路由

动态路由，路由懒加载

{ 
path:"/city", 
component:()=>import('./views/City.vue') 
}

2、Vue3的路由跳转

import {useRouter} from 'vue-router'; 
const $router = useRouter(); 
$router.push('/city')

3、Vue中的路由守卫

Vue 路由守卫主要有三种：

  1. 全局前置守卫（Global before guards）：router.beforeEach 注册⼀个全局前置守卫，用来 在路由切换之前进⾏拦截。可以用来进⾏用户身份验证、权限控制等操作。
  2. 路由独享守卫（Per-route guards）：在单个路由配置对象中通过beforeEnter 添加⼀个独 享守卫。只在当前路由⽣效，用来控制路由的访问权限或者修改路由的参数等。
  3. 组件内守卫（In-component guards）：在组件内通过beforeRouteEnter、 beforeRouteUpdate 和beforeRouteLeave 这三个⽣命周期钩⼦函数来实现对当前组件内路 由的拦截和控制。
    通常情况下，全局路由守卫被用来处理⼀些全局的路由拦截和控制，例如用户登录状态的验证，未 登录用户重定向到登录页面等。而路由独享守卫和组件内守卫主要被用来控制单个路由或者组件内 部的访问权限和数据加载等操作。

4、Vue如何实现跨域

在Vue 中实现跨域请求有多种方式，以下是其中的两种：

  1. 通过配置代理
    Vue CLI 提供了⼀个简单的方式来配置代理，使得在开发环境中可以将 API 请求代理到开发服务器。在 vue.config.js 文件中添加以下内容：
module.exports = { 
devServer: { 
proxy: { 
'/api': { 
target: 'http://api.example.com', // ⽬标服务器地址 
changeOrigin: true, // 是否跨域 
pathRewrite: { 
'^/api': '' // 将请求地址中的 '/api' 替换为空字符串 } 
} 
} 
} 
}

在上面的配置中，我们将所有以/api 开头的请求地址代理到http://api.example.com 这个地址，同时 启用了跨域选项changeOrigin: true。

  1. 使用JSONP
    JSONP（JSON with Padding）是⼀种跨域请求的⽅式，通过动态创建script 标签来实现。在Vue 中，我们可以通过第三方库vue-jsonp 来实现：
    ⾸先，我们需要安装vue-jsonp：
npm install vue-jsonp --save

然后，在需要使用JSONP 请求的组件中，引入vue-jsonp 并使⽤this.$jsonp() 方法发起请求，例 如：

import Vue from 'vue' 
import Jsonp from 'vue-jsonp' 
Vue.use(Jsonp) 
export default { 
created () { 
this.$jsonp('http://api.example.com/data', { param: 'callback' }).then (response => { 
console.log(response) 
}) 
} 
}

在上面的例子中，我们使用this.$jsonp() 方法发起请求，并指定了请求地址和参数param:
‘callback’，这个参数指定了JSONP响应中的回调函数名。响应结果会自动解析并传递给then() 中的回调函数。

5、Vue中watch和computed的区别

在Vue.js中，computed和watch都是用来监听数据变化并执行相应的逻辑。它们的主要区别在 于：

  1. computed属性是基于它的依赖缓存的。也就是说，只有当依赖发⽣改变时，computed才会 重新计算。这意味着，多个computed属性依赖于同⼀个响应式数据，只要这个响应式数据没 有发⽣变化，那么这些computed属性就不会重新计算。而watch则是每当被监听的数据变化时就会执行回调函数，因此不会有缓存的问题。
  2. computed属性通常用于处理数据的逻辑，而watch则通常用于监听数据变化后执行的异步或开销较大的操作。
    综上所述，computed适用于对⼀个或多个响应式数据进行计算，并将计算结果返回给模板进行渲 染；watch适用于观察某个特定的响应式数据，当它发⽣变化时执行相应的操作。

6、hash和history的区别

Vue Router是Vue.js官方的路由管理器，"它可以帮助我们构建SPA(Single Page Application)应用程序。Vue Router提供了两种路由模式：

1、 hash 模式
hash 模式是默认的路由模式。在hash模式下，URL中会以#号分隔，#号后面的部分被称为hash值。通过修改hash值，可以在不刷新页面的情况下切换页面状态，这是Vue Router实现路由的核心机制。

const router = new VueRouter({
mode: 'hash', 
routes: [ 
// 路由配置 
] 
})

在hash 模式下，路由的路径前⾯带有 # 号，如：http://example.com/#/user/profile。 原⽣JavaScript实现hash。

<body> 
<button id="btn"> hash跳转</button> 
<script> 
var btn = document.getElementById("btn"); 
window.addEventListener("hashchange",(event)=>{ 
console.log("hash:"+event.newURL) 
console.log("hash:"+event.oldURL) 
console.log("hash:"+location.hash) 
}) 
btn.addEventListener("click",()=>{ 
location.href="#/user" 
}) 
</script> 
</body>

hash路由的特点

1、hash变化会触发⻚⾯的跳转，即浏览器的前进和后退

2、hash变化不会刷新⻚⾯，spa必备特点

3、hash永远不会提交到server端(前端⾃⼰处理)

2、history 模式

hash是前端的自带路由，和服务器没有交互history 模式使用 HTML5 History API来实现路由的切换。在 history 模式下，URL 中没有 #号，而是直接使用真实的 URL，因此看起来更加美观，在 history 模式下，路由的路径不带有 #号，如:http://example.com/user/profile。

const router = new VueRouter({ 
mode: 'history', 
routes: [ 
// 路由配置 
] 
}) 
- history.pushState 
- window.onpopstate 
<body> 
<button id="btn"> hash跳转</button> 
<script> 
var btn = document.getElementById("btn"); 
btn.addEventListener("click",()=>{ 
const state = { 
name:"page1" 
} 
console.log("切换路由到","page1") 
history.pushState(state,'',"page1") 
}) 
/* 监听浏览器前进和后退 */ 
window.onpopstate = (event)=>{ 
console.log("onpopstate",event.state,location.pathname) } 
</script> 
</body>

区别：

  • 在 hash 模式下，URL 中的 #后面的部分被称为 hash 值，可以通过修改 hash 值来实现路由切换，不会向服务器发送请求，因此也不会影响浏览器的后退和前进按钮的行为。但是，在 hash 模式下，搜索引擎可能无法正确抓取到网站的内容。

  • 在 history 模式下，URL 中不会出现 #号，通过 HTML5 History API来实现路由的切换，向服务器发送请求，因此需要在服务器端进行相应的配置，以防止页面刷新时出现 404 错误。但是，使用history 模式可以更加美观，且可以让搜索引擎更好地抓取网站的内容。

选择哪种模式取决于具体的场景和需求。如果只是开发一些小型的应用程序或者不需要考虑SEO问题那么可以选择默认的 hash 模式;如果需要更好的SEO效果或者要开发一些大型的应用程序，可以选择history 模式。
history需要后端支持，服务需要额外配置 nginx。

location / { 
try_files $uri $uri/ /index.html; 
}

3、两者的选择

  • to B的系统推荐使用hash，简单易用，对url规范不敏感
  • to C的系统，可以考虑选择H5 history，但需要服务端支持。

7、watch监听有哪些属性可以配置

  1. 深度监视
    deep：true
    可以监视对象里边的属性
  2. 立即执行⼀次
    immediate：true
http://www.xdnf.cn/news/427141.html

相关文章：

  • 【递归、搜索与回溯】专题一：递归（二）
  • electron 基础知识
  • 软考软件评测师——计算机组成与体系结构（分级存储架构）
  • 当三维地理信息遇上气象预警：电网安全如何实现“先知先觉”？
  • 项目中会出现的css样式
  • MQTT协议详解：物联网通信的轻量级解决方案
  • JMeter同步定时器 模拟多用户并发访问场景
  • Qt进阶开发：QTcpSocket的详解
  • Leetcode 3542. Minimum Operations to Convert All Elements to Zero
  • APISQL免费版安装教程（视频）
  • java刷题基础知识
  • 【Folium】使用离线地图
  • 我的MCP相关配置记录
  • Cursor 编辑器 的 高级使用技巧与创意玩法
  • JavaScript异步编程 Async/Await 使用详解：从原理到最佳实践
  • 基于RT-Thread的STM32F4开发第三讲——DAC
  • 基于TI AM6442+FPGA解决方案，支持6网口，4路CAN，8个串口
  • 《ffplay 读线程与解码线程分析：从初始化到 seek 操作，对比视频与音频解码的差异》
  • Vue 3.5 ：新特性全解析与开发实践指南
  • MQTT 协议详解：物联网通信的利器
  • 【Unity】WebGL开发问题汇总
  • 专栏项目框架介绍
  • 【Redis】谈谈Redis的设计
  • 网安学途—流量分析 attack.pcap
  • 【TS入门笔记8---了解JSX】
  • G1在GC的时候会占用内存吗？占用的是分配的内存还是分配外的内存
  • JS Map使用方法
  • Linux上的rm和srm 命令
  • Femap许可网络配置
  • MRI、DX、CT 医学影像常用术语详解：概念与应用