声明响应式状态

可以使用reactive()函数创建一个响应式对象或数组:

import {rective} from 'vue'

const state = reative({count:0})

响应式对象其实是JavaScript proxy,其行为表现与一般对象相似,不同之处在于vue能够跟踪对响应式对象属性的访问与更改操作。

要在组件模版中使用响应式状态,需要在setup()函数中定义并返回。

import {reactive} from 'vue'

export default{
    //'setup'是一个专门用于组合式API的特殊钩子函数
    setup(){
        const state = reactive({count:0})
        
        //暴露state到模版
        return{
            state
        }
    }
}
<div>
    {{state.count}}
</div>

也可以在同一个作用域下定义更新响应式状态的函数,并将他们作为方法与状态一起暴露出去:

import { reactive } from 'vue'

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

    function increment() {
      state.count++
    }

    // 不要忘记同时暴露 increment 函数
    return {
      state,
      increment
    }
  }
}

暴露的方法通常会被用作事件监听器:

<button @click="increment">
  {{ state.count }}
</button>

setup**