Vue3尝个鲜，reactive、ref、toRefs的简单使用

这年头不会vue3的是不是要被淘汰了，为了我还能吃上口热乎饭，赶紧来玩一玩

需求是响应式的，修改数值，如图所示

这在 vue2.x 中简直无脑操作，接下来我们用 vue3 中的两种方式去实现

---

<!-- HTML代码我们保持一致 -->
<template>
  <div>{
   
   { a }}</div>
  <button @click="add">+</button>
  <button @click="reduce">-</button>
</template>

1. ref

<script>
import { ref } from 'vue';
export default {
  setup(){
    // ref 返回一个响应式的对象 { value:100 }
    const a = ref(100);

    // 动态修改值，必须修改响应式对象的 value
    const add = () => a.value ++ ;
    const reduce = () => a.value -- ;

    // 将响应式的值和方法给 return 出去
    return { a,add,reduce }
  }
}
</script>

2. reactive + toRefs

<script>
import { reactive,toRefs } from 'vue';
export default {
  setup(){
    // reactive函数接收一个对象，返回一个响应式对象
    const data = reactive({
      a:100,
      add:() => data.a ++,
      reduce:() => data.a --
    })

    // 将响应式对象解构return，否则template中使用 a 则需要 data.a
    return { ...toRefs(data) }
  }
}
</script>