es6特殊写法-CFANZ编程社区

script标签中的importmap

<script type="importmap">
{
  "imports": {
    "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
  }
}
</script>

这个写法是 Import Maps，它是一种浏览器原生支持的机制，用于定义模块导入路径的映射。通过 importmap，你可以告诉浏览器在使用 import 语句时，如何解析模块路径。

作用

定义模块路径映射：这里将 "vue" 映射到 https://unpkg.com/vue@3/dist/vue.esm-browser.js，这样在后续的 import 语句中，你可以直接写 import { createApp } from 'vue'，而不需要写完整的 URL。
简化模块导入：避免在每个文件中都写长路径，提升代码可读性。
浏览器原生支持：无需使用打包工具（如 Webpack 或 Vite），直接在浏览器中运行模块化代码。

使用场景

适合小型项目或快速原型开发。
不需要复杂的构建工具，直接在浏览器中运行现代 JavaScript 模块。

注意事项

浏览器支持：Import Maps 目前在现代浏览器（如 Chrome 89+ 和 Edge 89+）中支持，但在某些旧浏览器中可能不支持。
仅适用于模块化脚本：需要配合 type="module" 的 <script> 使用。

总结

<script type="importmap"> 是一种现代化的模块路径管理方式，适合直接在浏览器中运行模块化代码，尤其是在不使用构建工具的情况下。

script标签中的module

<script type="module">
        import { createApp } from 'vue'
      
        createApp({
          data() {
            return {
              message: 'Hello Vue!'
            }
          }
        }).mount('#app')
      </script>

这个 <script type="module"> 是 ES Module（ECMAScript Module） 的写法，它是 JavaScript 的模块化标准，用于在浏览器中直接使用模块化代码。

作用

模块化支持：type="module" 告诉浏览器，这段脚本是一个模块化脚本，可以使用 import 和 export 关键字。
作用域隔离：模块中的变量和函数默认是局部的，不会污染全局作用域。
异步加载：模块脚本会自动异步加载，不会阻塞 HTML 的解析。

{}定义对象

{} 是 JavaScript 对象字面量的写法，用于定义一个对象。它是 JavaScript 中的基本语法，用来表示键值对的集合。

Import Maps 中的

{
  "imports": {
    "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
  }
}

这是一个 JSON 对象，用于定义模块路径的映射。
外层的 {} 表示一个对象，里面的 "imports" 是对象的键，值是另一个对象。

对象里除了有属性，也可以有方法，如上面createApp传入的参数{}中的data(){}。

方法简化定义

在现代 JavaScript（ES6+）中，在定义对象或类的方法时，可以省略 function 关键字。这种写法在 Vue 的 data() 方法中也被广泛使用。

class A{
  sayHi(){
    console.log("hi");
  }
}

let obj={
  sayHi(){
    console.log("hi");
  }
}
obj.sayHi();

之前的createApp代码中

data() {
  return {
    message: 'Hello Vue!'
  }
}

等价于：

data: function() {
  return {
    message: 'Hello Vue!'
  }
}