教程：第 2 步

Vue教程

声明式渲染

你在编辑器中看到的是一个 Vue 单文件组件 (Single-File Component，缩写为 SFC)。单文件组件是一种可复用的代码组织形式，它将从属于同一个组件的 HTML、CSS 和 JavaScript 封装在使用 .vue 后缀的文件中。

Vue 的核心功能是声明式渲染：通过扩展于标准 HTML 的模板语法，我们可以根据 JavaScript 的状态来描述 HTML 应该是什么样子的。当状态改变时，HTML 会自动更新。

在 Vue 中，能在改变时触发更新的状态被称作是响应式的。我们可以使用 reactive() API 来声明响应式状态。由 reactive() 创建的对象都是 JavaScript Proxy，其行为与普通对象一样：

js 复制代码

import { reactive } from 'vue'

const counter = reactive({
  count: 0
})

console.log(counter.count) // 0
counter.count++

reactive() 只适用于对象（包括数组和内置类型，如 Map 和 Set）。另一个 API ref() 则可以接受任何值类型。ref 会返回一个包裹对象，并在 .value 属性下暴露内部值：

js 复制代码

import { ref } from 'vue'

const message = ref('Hello World!')

console.log(message.value) // "Hello World!"
message.value = 'Changed'

reactive() 和 ref() 的细节在指南 - 响应式基础中有进一步讨论。

在单文件组件中，上述响应式状态可以在 <script setup> 块中声明并直接在模板中使用。下面通过双花括号语法，根据 counter 对象和 message ref 的值渲染动态文本：

vue-html 复制代码

<h1>{{ message }}</h1>
<p>Count is: {{ counter.count }}</p>

注意：在模板中访问 message ref 时不需要使用 .value，它会被自动解包。

如果你使用的是非 SFC 环境（例如直接在 HTML 中通过全局构建版本使用 Vue），传入 createApp() 的对象就是一个 Vue 组件。组件的状态应该在 setup() 函数中声明，并使用一个对象返回：

js 复制代码

setup() {
  const counter = reactive({ count: 0 })
  const message = ref('Hello World!')
  return {
    counter,
    message
  }
}

返回对象中的属性可以在模板中使用。

在 Vue 中，能改变并触发更新的状态被认为是响应式的。在 Options API 中，响应式状态被保存在组件中。我们可以使用 data 组件选项来声明响应式状态，该选项应该是一个返回对象的函数。

在 SFC 中：

js 复制代码

export default {
  data() {
    return {
      message: 'Hello World!'
    }
  }
}

在非 SFC 环境中，将该对象直接传给 createApp()：

js 复制代码

createApp({
  data() {
    return {
      message: 'Hello World!'
    }
  }
})

message 属性可以在模板中直接使用。下面展示了使用双花括号法，根据 message 的值渲染动态文本：

vue-html 复制代码

<h1>{{ message }}</h1>

在双花括号中的内容并不只限于标识符或路径——我们可以使用任何有效的 JavaScript 表达式。

vue-html 复制代码

<h1>{{ message.split('').reverse().join('') }}</h1>

发现翻译问题或内容错误？请告诉我们。