vue3中如何定义响应式变量

vue2中定义方式：

熟悉vue2的前端开发小伙伴，都知道定义变量的方式是属于 选项式写法，所有的变量名全都定义在 data(){return { title:‘hello world’}},里，如下图所示：

<template>
     <div>
          <h1>{{title}}</h1>
          <button @click="sayHi">按钮</button>
     </div>
</template>

<script>
export default {
    //这种是option api(选项api)
     data(){
          return {
              title:'hello world'
          }
     },
     methods:{
         sayHi(){
         this.title = "hello vue";
         }
     }
}
</script>

那么，在vue3中定义变量的方式是组合式写法，在setup函数里，提供了ref和reactive，

<template>
     <div>
          <h1>{{title}}</h1>
          <h1>{{person}}</h1>
          <button @click="sayHi">按钮</button>
     </div>
</template>

<script>
//引入vue中的一个方法
import {ref,reactive} from 'vue';  //ref可以把字符串变成响应式变量 ，reactive可以把对象变成响应式对象
export default {
    //composition api(组合api)
    setup(){
        let title = ref("hello world");
        const person = reactive({"name":"小明",age:2});
        function sayHi(){
            title.value = "hello Vue"
            person.name ="小张"
        }
        return{
            title,
            sayHi,
            person
        }
    }
}
</script>

reactive更推荐去定义复杂的数据类型 ref 更推荐定义基本类型，ref也可以定义数组和对象，但ref操作数据需要.value，注意在template模板中不需要。reactive一直都不需要.value，但是用reactive() 创建的响应式对象，整个对象是响应式的但对象里的每一项都是普通的值，当你把它用展开运算符展开后 整个对象的普通值都不是响应式的，所以需要展开 reactive() 创建的响应式对象 又不想让他们失去响应式特点的时候 就需要用 toRefs() 将它进行转换