Vue 3

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。

Vue 的两个核心功能：

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

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

API 风格

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

选项式 API (Options API)#

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<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 (Composition API)

通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。

<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<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>

　　

• 当你打算用 Vue 构建完整的单页应用，推荐采用组合式 API + 单文件组件。