// 什么是 Vue？
是一款用于构建用户界面的 JavaScript 框架

// Vue 的两个核心功能：
声明式渲染
响应式

//渐进式框架
Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。

//单文件组件
Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里。

<script>
    export default {
      data() {
        return {
          count: 0
        }
      }
    }
    </script>
    
    <template>
      <button @click="count++">Count is: {{ count }}</button>
    </template>
    
    <style scoped>
    button {
      font-weight: bold;
    }
    </style>

    //API 风格#
    Vue 的组件可以按两种不同的风格书写：选项式 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>
    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>  

    该选哪一个？
    在学习的过程中，推荐采用更易于自己理解的风格。再强调一下，大部分的核心概念在这两种风格之间都是通用的。熟悉了一种风格以后，你也能够很快地理解另一种风格。