openlayers+vue初学注意点

当我们使用 vue 开发 openplayers 的时候，总是会下意识的使用 ref 来代理openplays 中的 变量， 这种方法是不可取的， 很容易发生我们想不到的错误
下面看一段我最初写的，理论正确，但实际用不了的代码

<script setup>import{onMounted,ref}from'vue'importMapfrom"ol/Map"importTileLayerfrom"ol/layer/Tile.js";importXYZfrom"ol/source/XYZ.js";importViewfrom"ol/View.js";import{fromLonLat}from'ol/proj.js';constmap=ref(null);constmapRef=ref(null)constlayer1=ref(null);constlayer2=ref(null);onMounted(()=>{layer1.value=newTileLayer({source:newXYZ({url:"https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"})})layer2.value=newTileLayer({source:newXYZ({url:"https://webst01.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}"})});map.value=newMap({target:mapRef.value,layers:[layer1.value,layer2.value],view:newView({center:fromLonLat([114.31,30.52]),zoom:10,projection:"EPSG:3857"})})})constremoveBJ=()=>{map.value.removeLayer(layer2.value);}</script><template><divclass="button"><!--<button @click="gotoBJ">跳转到北京</button>--><button @click="removeBJ">remove</button></div><div ref="mapRef"id="map"></div></template><style scoped>#map{width:100vw;height:100vh;}</style>

所以， 我们在使用 vue+openlayers 的时候，对openlayer 中的对象尽量不要去用 ref来定义