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() 将它进行转换