响应式基础

响应式基础
响应式基础

 一、声明响应式状态

我们可以使用 reactive() 函数创建一个响应式对象或数组：
```
import { reactive } from 'vue'

const state = reactive({ count: 0 })
1
2
3
```
响应式对象其实是 JavaScript Proxy，其行为表现与一般对象相似。不同之处在于 Vue 能够跟踪对响应式对象属性的访问与更改操作。如果你对这其中的细节感到好奇，我们在深入响应式系统一章中会进行解释，但我们推荐你先读完这里的主要指南。

要在组件模板中使用响应式状态，需要在 setup() 函数中定义并返回。
```
import { reactive } from 'vue'

export default {
  // `setup` 是一个专门用于组合式 API 的特殊钩子函数
  setup() {
    const state = reactive({ count: 0 })

    // 暴露 state 到模板
    return {
      state
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
```
```
<div>{{ state.count }}</div>
1
```
自然，我们也可以在同一个作用域下定义一个更新 state 的函数，并作为一个方法与 state 一起暴露出去：
```
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({ count: 0 })

    function increment() {
      state.count++
    }

    // 不要忘记同时暴露 increment 函数
    return {
      state,
      increment
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
```
暴露的方法通常会被用作事件监听器：
```
<button @click="increment">
  {{ state.count }}
</button>
1
2
3
```
1.1

响应式基础

一、声明响应式状态