什么是声明式渲染

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

当状态改变时，HTML 自动更新，这个能在改变时触发状态更新，被称作是响应式的。对应的我们想声明一个响应式状态，可以使用 Vue 的 reactive() 或者 ref() API。

reactive、ref 介绍

reactive() 创建的对象都是 JavaScript 的 Proxy，其行为与普通对象一样。不同之处在于 Vue 能够跟踪对响应式对象属性的访问与更改操作。这点很重要，当用 reactive、ref 定义了响应式，当更改它们时，视图会随即自动更新，这让状态管理更加简单直观。

但理解它是如何工作的也是很重要的，由于篇幅我们不在这一节讲。关于Vue3 的响应式数据原理，如果你想进一步了解，可以看【基础加餐篇 - 响应式数据原理】

ref() 方法来允许我们创建可以使用任何值类型的响应式 ref，ref() 将传入参数的值包装为一个带 .value 属性的 ref 对象

如果你想知道 ref 什么时候要写.value，什么时候不需要，可以看【基础加餐篇 - Ref 解包场景】

setup 介绍

那么我们知道了怎么定义响应式，但要在组件模板中使用响应式状态，需要在 setup() 函数中定义并返回。

有两种方式，一种是通过 setup 函数定义并暴露出去，这种方式会非常繁琐，需要你把状态和方法手动暴露：

import { reactive } from 'vue'export default {setup() {const state = reactive({ count: 0 })function increment() {state.count++}return {state,increment}}
}

另一种方式是使用构建工具，

实战

定义响应式的 reactive counter 对象初始值为{ count: 0 } ，和 ref message 初始值为 ‘Hello World’，并在模板中显示 count 值和 message 值。

我们在

在组件的