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