reactive

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

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

  1. //通过reactive()，count具有了响应式的能力
  2. const obj = reactive({ count: 0 })
  • 示例
  1. <template>
  2.   <div>
  3.     <button @click="increase">被点击了{{obj.count}}次</button>
  4.   </div>
  5. </template>
  7. <script>
  8.   import { createComponent, reactive } from '@vue/composition-api'
  9.   export default createComponent({
  10.     setup() {
  11.       const obj = reactive({ count: 0 })
  13.       const increase = () => {
  14.         obj.count++
  15.       }
  16.       return {
  17.         obj,
  18.         increase
  19.       }
  20.     }
  21.   })
  22. </script>

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