vue3引入立即执行函数

在Vue3中没有引入立即执行函数这个概念。立即执行函数模式是一种语法，可以让你的函数在定义后立即被执行，并且可以将函数包裹在局部作用域中，避免全局变量的污染。在Vue中，可以使用created钩子函数来实现在页面加载完成后执行一次的设置函数。这个钩子函数在Vue实例创建完成后立即执行，并且只执行一次。所以，相当于Vue中的created钩子函数可以实现立即执行函数的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

相关问题

vue3引入高德天气

### 在 Vue3 中引入并使用高德地图天气 API

#### 安装依赖包
为了能够在 Vue3 项目中顺利集成高德地图及其天气插件，需先安装 `vue-amap` 组件库。

npm install vue-amap --save

#### 引入与初始化配置
完成上述操作之后，在项目的入口文件（通常是 main.js 或者类似的启动脚本），按照如下方式来加载和初始化：

import { createApp } from 'vue';
import App from './App.vue';

// 引入vue-amap组件库
import VueAMap from '@vuemap/vue-amap-taro'; 

const app = createApp(App);

app.use(VueAMap);
VueAMap.initAMapApiLoader({
    key: "此处替换为自己的key", // 替换成申请到的应用程序密钥
    plugin: ["AMap.Weather"], // 加载所需的插件列表，这里加入了Weather服务
});

app.mount('#app');

注意这里的 `plugin` 数组内包含了 `"AMap.Weather"` 这一项，这表明将会加载来自高德的地图天气查询功能[^1]。

#### 使用 Weather Service 获取实时气象数据
一旦完成了基础设置工作，则可以在任何页面或组件内部通过下面的方式调用获取当前定位位置的即时天气状况：

<template>
  <div id="weatherInfo">
    {{ weatherData }}
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
let AMap;
let weather;

onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: '安全码',
  };
  
  const loadScript = document.createElement('script');
  loadScript.src =
    'https://webapi.amap.com/maps?v=2.0&callback=initMap&key=' +
    process.env.VUE_APP_AMAP_KEY;
  document.head.appendChild(loadScript);

  function initMap() {
    AMap = window.AMap;
    
    new Promise((resolve) => setTimeout(resolve, 50)).then(() =>
      (window.weather = new AMap.Service('weather'))
    );
  }
});
</script>

此段代码展示了如何创建一个简单的模板用于显示返回的数据，并定义了一个生命周期钩子函数 `onMounted()` 来确保当组件挂载完成后立即执行必要的逻辑处理。其中还涉及到动态加载外部 JavaScript 文件以及延迟实例化 `AMap.Service('weather')` 对象以等待 SDK 脚本完全加载完毕后再进行下一步动作[^2]。

最后一步就是实际发起请求获得具体的天气详情了：

async getWeatherDetails(): void{
  try {
    let result = await this.weather.getLive({ city: '北京' });
    console.log(result.now); // 输出最新的实况天气信息
  } catch(error){
    console.error("Failed to fetch live weather data.", error);
  }
}

这段 TypeScript 函数演示了怎样利用之前准备好的 `this.weather` 实例去异步检索特定城市的最新天气状态，并打印出来供调试查看[^3]。

vue3项目引入百度地图

### 在 Vue 3 中引入和配置百度地图 API

为了在 Vue 3 项目中成功集成百度地图 API，需遵循特定步骤来确保组件能够正常加载并显示地图。

#### 安装依赖包
首先，在命令行工具中执行 npm 或 yarn 命令安装 `vue-baidu-map` 插件。这一步骤对于获取必要的库文件至关重要[^2]。

npm install vue-baidu-map@latest --save

或者使用 Yarn：

yarn add vue-baidu-map@latest

#### 配置 main.js 文件
接着修改项目的入口文件 `main.js` 来注册插件，并传入开发者申请得到的应用秘钥 (ak)，以便合法调用百度地图服务接口。

import { createApp } from 'vue'
import App from './App.vue'
// 导入百度地图插件
import BaiduMap from 'vue-baidu-map'

const app = createApp(App)

app.use(BaiduMap, {
    ak: '你的密钥' // 替换成自己的应用秘钥
})

app.mount('#app')

#### 创建地图展示模板
最后定义一个用于呈现地图视图的单文件组件（如 MapComponent.vue），其中包含了 HTML 结构、样式以及脚本逻辑部分。通过监听生命周期钩子函数 `onMounted()` 实现当页面完成渲染后立即初始化地图对象[^1]。

<template>
<div class="map">
    <div class="baidu" ref="mapRef"></div>
</div>
</template>

<script setup>
import { onMounted, ref } from "vue";

const mapRef = ref();

onMounted(() => {
    let map = new window.BMapGL.Map(mapRef.value);
    let point = new window.BMapGL.Point(116.404, 39.915);

    map.centerAndZoom(point, 15);
});
</script>

<style lang="less" scoped>
.baidu {
    height: 300px;
}
</style>