vue?
?
?
0.vue数组改变但是数据没有同步更新的（vue不能检测以下数组的变动的解决方法）
a>利用索引直接设置一个数组项时,如vm.items[indexOfItem] = newValue；
?vm.$set(vm.items, indexOfItem, newValue)或者vm.items.splice(indexOfItem, 1, newValue)
b>当你修改数组的长度时，例如：vm.items.length = newLength；
vm.items.splice(newLength）
1.为什么不建议用索引index（重绘）
a）key的作用主要是为了高效的更新虚拟DOM
b）当以index为key值时，如果数组长度发生变化，会导致key的变化，比如删除其中某一项，那么index会相应变化。所以用index作为key和不加index没有什么区别，都不能提升性能。一般用每项数据的唯一值来作为key，就算数组长度变化，也不会影响到这个key
2.如何解决props层级过深的问题
1)使用vuex
(2)传递数据，使用以下接收（均不含被props接收的数据）
this.$attrs 接收属性($attrs可以接受上级传递过来的属性,上级绑定v-bind=’$attrs’)
this.$listeners 接收事件（不含被 .native 修饰符的事件）
3.解决非工程化项目初始化页面闪动问题?闪烁花括号{{}}
vue页面在加载的时候闪烁花括号{{}}，使用v-cloak，隐藏未编译时候的标签
//css样式
[v-cloak] {
????display: none;
}
//html代码? <div v-cloak>{{ text }}</div>
4.路由懒加载
a)vue异步组件技术 ==== 异步加载
{ path: '/home', name: 'home',?component: resolve =>?require(['@/components/home'],resolve)}
b)路由懒加载(使用import)
const 组件名=() => import('组件路径'); const Home = () => import('@/components/home')
c）webpack提供的require.ensure() 多个路由指定相同的chunkName，会合并打包成一个js文件。
{ path: '/home', name: 'home', component: r => require.ensure([], () => r(require('@/components/home')), 'demo') }
5.vue中的代理proxy
jsonp、cors、Node中间件代理(两次跨域)、nginx反向代理
CORS支持所有类型的HTTP请求，是跨域HTTP请求的根本解决方案。
JSONP只支持GET请求，JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。
不管是Node中间件代理还是nginx反向代理，主要是通过同源策略对服务器不加限制。
日常工作中，用得比较多的跨域方案是cors和nginx反向代理。
6.vuex的核心概念
state => 基本数据
getters => 从基本数据派生的数据
mutations => 修改数据，同步
actions => 修改数据，异步
modules => 模块化Vuex
7.vue如何优化首屏加载速度？
（1）按需加载组件，不一次性加载所有组件
（2）减少打包js，如果打包后的js文件过大，会阻塞加载。如下：
A、在index.html文件中：<script src="/static/common/js/vue.min.js"></script>
B、在vue.config.js文件中配置:
config.externals({
??????vue: 'Vue',
?})
配置两个步骤，不打包vue
（3）关闭sourcemap，开启压缩代码
vue.config.js文件中配置：productionSourceMap: false,
（4）加个好看的loading效果
8.vue原理
https://blog.csdn.net/weixin_43972437/article/details/1072for1071
js
0.遍历对象的方法：
for...in? 遍历对象所有可枚举
Object.keys(obj);Object.values（obj；一个表示给定对象的所有可枚举属性的字符串数组。
Object.getOwnPropertyNames(obj)，返回一个数组，包含对象自身的所有属性（包含不可枚举属性），如下：
Object.getOwnPropertyNames(obj).forEach(function(key){
console.log(key+ '---'+obj[key])
})
ps:for in遍历的是数组的索引（即键名）;而for of遍历的是数组元素值,不包括数组的原型属性method和索引name。
1.typeof ,instance of,Object.prototype.toString.call
JavaScript 里使用?typeof?来判断数据类型，只能区分基本类型，即 “number”，”string”，”undefined”，”boolean”，”object” 五种，null 和 数组，object，结果都为object。
instanceof不能检测出number、boolean、string、undefined、null、symbol类型，
所以instancof常用于检测复杂类型以及级成关系，多判断函数。
null、undefined没有construstor方法，因此constructor不能判断undefined和null。
但是contructor的指向是可以被改变，不安全。
Object.prototype.toString.call(var)?能判断具体的类型。toString()?方法返回一个表示该对象的字符串。
var o = new Object();o.toString(); // returns [object Object]
Object.prototype.toString.call(null);// ”[object Null]”
Object.prototype.toString.call(undefined);// ”[object Undefined]”
Object.prototype.toString.call(“abc”);// ”[object String]”
Object.prototype.toString.call(123);// ”[object Number]”
Object.prototype.toString.call(true);// ”[object Boolean]”2.普通函数与箭头函数
箭头函数没有constructor，所以不能使用new调用；不能通过bind、call、apply改变this指向。
3.eval()函数
eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。
4.内存泄漏 （一块被分配的内存既不能使用也不能回收，直到浏览器结束）
意外的全局变量、闭包、未清理的dom元素、被遗忘的定时器和回调?。
Vue如何处理：
1.如果在mounted/created 钩子中绑定了DOM/BOM 对象中的事件，需要在beforeDestroy 中做对应解绑处理
2.如果在mounted/created 钩子中使用了第三方库初始化，需要在beforeDestroy 中做对应销毁处理
3.如果组件中使用了定时器，需要在beforeDestroy 中做对应销毁处理
4.模板中不要使用表达式来绑定到特定的处理函数，这个逻辑应该放在处理函数中？
5.如果在mounted/created 钩子中使用了$on，需要在beforeDestroy 中做对应解绑($off)处理
6.某些组件在模板中使用 事件绑定可能会出现泄漏，使用$on 替换模板中的绑定
5.async、promise区别
async/await是基于Promise实现的，它不能用于普通的回调函数。
promise:then接收resolve()，catch接收reject()
Promise.all:是等所有异步操作都完成之后返回结果，相当于让这些异步同步了（如多个await同步执行）。如果没有报错，返回执行结果[res1, res2,...]；如果报错，则返回第一个报错的promise的结果
6.bind方法可以让函数想什么时候调用就什么时候调用。apply、call方法只是临时改变了this指向。
7.单例、工厂、观察者项目中实际场景
单例：弹窗，无论点击多少次，弹窗只应该被创建一次；全局缓存、vuex创建全局的store、Redux中的Store
工厂：创建工具库，导出有且只有一个的引用如: jquery 可以使用$， lodash可以使用；类似React.createElement,屏蔽了开发者直接使用new VNode,符合开放封闭原则，VNode的实现对开发者不可见
观察者：onClick的事件绑定、Promise、jQuery.$callBack、NodeJs自定义事件
8.for in? 和object.keys区别
for...in 会遍历继承的原型属性；Object.keys不会遍历继承的原型属性
9.JavaScript有几种类型的值
栈：原始数据类型（Undefined ?Null ?Boolean ?Number ?String）ps：栈存放指针
堆：引用数据类型（对象、数组、函数）
10.双问号操作符
a ?? b等同于 a !== undefined && a !== null ? a : b
参考：2021年前端最新最全面试题（答案持续更新中~） - 良人非良 - 博客园
设计模式：JavaScript中常见的十五种设计模式 - -渔人码头- - 博客园
css
1.
:root { --main-bg-color: coral; }//没有引号
#div1 { background-color: var(--main-bg-color); }
业务
1.openlayers
WMS服务：Web Map Service，网络地图服务，它是利用具有地理空间位置信息的数据制作地图，其中将地图定义为地理数据的可视化表现，能够根据用户的请求，返回相应的地图（返回服务级元数据、返回一个地图影像、返回显示在地图上的某些特殊要素的信息、返回地图的图例信息）
(OpenGIS Web Map Title Service)WMTS牺牲了提供定制地图的灵活性，代之以通过提供静态数据（基础地图）来增强伸缩性，这些静态数据的范围框和比例尺被限定在各个图块内.
网络要素服务（WFS）支持用户在分布式的环境下通过HTTP对地理要素进行插入，更新，删除，检索和发现服务。WFS通过OGC Filter构造查询条件，支持基于空间几何关系的查询，基于属性域的查询，当然还包括基于空间关系和属性域的共同查询。
1）切片方式（TileWMS）：动态地图在GIS Server生成后，以切片的方式返回到前端，优点是将地图切分，每个切片的数据量很小，便于数据的传输，适用于网络状况不佳的环境；缺点是在地图切片的过程中，可能会造成我遇到的 标注多次出现的问题。
?2）图像方式（ImageWMS）：地图生成后，直接以一个整体返回到前端显示，优点是不会出现标注重复出现的问题，确定是对网络状况不佳的环境，可能出现请求失败的问题。