JavaScript

简称JS，文件以.js为后缀。

ECMAScript

ECMAScript （简称ES）是JavaScript的标准化版本，由ECMA国际（前身为欧洲计算机制造商协会）的TC39技术委员会负责制定。以下是ECMAScript的主要版本迭代历程：

1. ECMAScript 1（1997年）

   • 初始版本，确立了JavaScript作为一门编程语言的基础。

2. ECMAScript 2（1998年）

   • 一个小更新，增加了一些新特性和错误修复。

3. ECMAScript 3（1999年）

   • 引入了正则表达式、try...catch异常处理等重要特性。

4. ECMAScript 4（未能发布）

   • 计划引入面向对象编程、模块化等特性，但由于争议过大，该版本最终被废弃。

5. ECMAScript 5（2009年）

   • 重新聚焦于小的、一致的更新，引入了严格模式、JSON等。

6. ECMAScript 5.1（2011年）

   • 一个小更新，主要是一些bug修复和一些新的API。

7. ECMAScript 6（ES2015，2015年）

   • 引入了类、模块、箭头函数、模板字符串、解构赋值、let和const、Promise、Map和Set等大量新特性。

   类演示

   模块演示

   箭头函数示例

   其余新特性示例

8. ECMAScript 2016（ES2016）

   • 引入了Array.prototype.includes方法和指数运算符（**）。

9. ECMAScript 2017（ES2017）

   • 引入了async/await、Object.values和Object.entries等。

10. ECMAScript 2018（ES2018）

    • 引入了Promise.prototype.finally、Object.getOwnPropertyDescriptors等。

11. ECMAScript 2019（ES2019）

    • 引入了Array.prototype.flat和Array.prototype.flatMap、String.prototype.trimStart和String.prototype.trimEnd等。

12. ECMAScript 2020（ES2020）

    • 引入了空值合并运算符（??）、globalThis、Promise.allSettled等。

13. ECMAScript 2021（ES2021）

    • 引入了逻辑赋值运算符（||=和&&=）、Promise.any等。

14. ECMAScript 2022（ES2022）

    • 引入了Array.prototype.at、String.prototype.replaceAll、Object.hasOwn、FinalizationRegistry等。

15. ECMAScript 2023（ES2023）

    • 引入了Array.prototype.findLast、Array.prototype.findLastIndex、String.prototype.codePoints等。

16. ECMAScript 2024（ES2024）（预计）

    • 正在讨论中，预计会引入新的语法和API。

默认暴露

在Vue 3中，默认暴露通常指的是使用setup函数时，所有返回的对象属性都会被暴露给模板和外部。这意味着，如果你在setup函数中返回了一个对象，那么这个对象的所有属性都会默认暴露给组件的模板。

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="greet">Greet</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

// 默认暴露方式
export default defineComponent({
  setup() {
    const message = 'Hello from Vue 3';
    const greet = () => {
      alert(message);
    };

    // 暴露已有属性和方法
    return {
      message,
      greet
    };
  }
});
</script>

官网

安装

使用脚手架创建应用

下载脚手架（CLI）

pnpm i -g @vue/cli

创建一个项目

这里会让你选择vue的版本和包管理工具，也可以使用本脚手架创建vue3应用，但是官方更推荐使用vite创建vue3应用

选项式API（Options API）

使用选项式API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data，methods，mounted，computed 等，选项所定义的属性都会暴露在函数内部的this上，它会指向当前的组件实例。

export default {
    name: 'Demo',
    // name 就是一个选项
    data() {
        // data也是一个选项
        return {
            age: 18
        }
    },
    methods: {
        // methods也是一个选项
        grow() {
            this.age+=1
        }
    },
    computed() {
        // computed也是一个选项

    }
}

组件通信

props

自定义事件

mitt

对于兄弟组件之间的通信，可以使用第三方库mitt来实现一个简单的事件总线。

安装mitt:

pnpm i mitt

自定义钩子

生命周期

生命周期选项