# VUE 简介

注意：VUE2 将于 2023 年 12 月 31 日停止维护
Vue 是一款用于构建用户界面的 JavaScript 框架。

基本实例：

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')
template

展示出了 Vue 的两个核心功能：

1. 声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。

2. 响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

# 单文件组件

在大多数构建工具的 Vue 项目中，我们可以使用一种类似 HTML 格式的文件来书写 Vue 组件，它被称为单文件组件（也被称为 *.vue 文件，英文名称：Single-File Components，缩写为 SFC）。Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件中。

# API 风格

Vue 的组件可以按照两种不同风格书写：选项式 API 和组合式 API。

# 选项式 API

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

    <script>
    export default {
    // data() 返回的属性将会成为响应式的状态
    // 并且暴露在 `this` 上
    data() {
        return {
        count: 0
        }
    },

    // methods 是一些用来更改状态与触发更新的函数
    // 它们可以在模板中作为事件监听器绑定
    methods: {
        increment() {
        this.count++
        }
    },

    // 生命周期钩子会在组件生命周期的各个不同阶段被调用
    // 例如这个函数就会在组件挂载完成后被调用
    mounted() {
        console.log(`The initial count is ${this.count}.`)
    }
    }
    </script>

    <template>
    <button @click="increment">Count is: {{ count }}</button>
    </template>

# 组合式 API

通过组合式API，我们可以使用导入的API函数来描述组件逻辑。
在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。
这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。
比如，<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。

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

    // 响应式状态
    const count = ref(0)

    // 用来修改状态、触发更新的函数
    function increment() {
    count.value++
    }

    // 生命周期钩子
    onMounted(() => {
    console.log(`The initial count is ${count.value}.`)
    })
    </script>

    <template>
    <button @click="increment">Count is: {{ count }}</button>
    </template>