Vue3 reactive函数详解

前面的很多例子使用到了 reactive，现在我们来正式操练它。

reactive 接受一个对象参数，然后返回一个具有响应式的原始值代理对象。

//通过reactive()，count具有了响应式的能力
const obj = reactive({ count: 0 })

<template>
  <div>
    <button @click="increase">被点击了{{obj.count}}次</button>
  </div>
</template>

<script>
  import { createComponent, reactive } from '@vue/composition-api'
  export default createComponent({
    setup() {
      const obj = reactive({ count: 0 })

      const increase = () => {
        obj.count++
      }
      return {
        obj,
        increase
      }
    }
  })
</script>

到这里你已经学会了 reactive，下面我们继续迎难而上。