Vue3尝个鲜，reactivereftoRefs的简单使用

Posted 2022-11-23 前端薛小帅

这年头不会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>