Vue3中的Ref与Reactive

ref 和 reactive 都是 Vue3 中的响应式数据的实现方式。

ref 主要用于将普通的数据类型包装成响应式对象，通过 .value 属性来访问该值，当值被修改时会触发视图的更新。例如：

import {ref} from 'vue'
export default {
    name:'test',
    setup() {
        // 定义数据
        let num = ref(1)
        // 定义方法
        function add(){
            num.value++
            console.log(num);
        }
        

reactive 则是将一个对象转换成响应式对象，当对象的属性被修改时会触发视图的更新。例如：

let person = reactive({
				name:'张三',
				age:18,
}
function changeInfo(){
				person.name = '李四'
				person.age = 48

总的来说，ref 适用于简单数据类型的响应式处理，而 reactive 则适用于复杂数据类型的响应式处理。此外，ref 可以通过 .value 访问值，而 reactive 则可以直接访问对象的属性。