vue3--reactive() and ref(）

// reactive作用：接受一个对象类型的数据，返回一个响应式对象

<script setup>

// 导入
import { reactive } from "vue";
// 使用一：调用
const state =reactive({
  count:100
})

// 使用二：注册点击事件
const setCount =()=>{
  state.count++
}
</script>
<template>
  <div>
    <div>{{ state.count }}</div>

    <button @click="setCount">+1</button>
  </div>
</template>

// ref()接受简单类型或者对象类型数据的传入并返回一个响应式对象

<script setup>

// 导入
import {ref} from 'vue'
const  count = ref(100)
console.log(count);//返回一个对象
//在原有基础之上包了一个对象。对象里面的value=100，包成了一个复杂类型，成为复杂类型之后再使用reactive
console.log(count.value);//100
// so 访问数据需要通过.value but在template中扒掉对象，不需要加.value

// 注册点击事件
const setCount=()=>{
  count.value++
}

</script>

<template>
  <div>
    <div>{{ count }}</div>

    <button @click="setCount">+1</button>
  </div>
</template>