Vue3中ref和reactive的区别

ref 和 reactive 的区别:

1. 基本数据类型

         ref 可以用来声明基本数据类型的响应式数据.

         reactive 不能用来声明基本数据类型的响应式数据，会报：cannot be made reactive.

2. 引用数据类型

          ref 声明的引用类型的响应式数据 .value 之后等于reactive声明的引用类型的响应式数据.

代码实例:

//ref
let personRef = ref({
      name: "李四",
      age: 19,
});
let countRef = ref(10);
let arrRef = ref(["a", "b", "c"]);

//reactive
let personReactive = reactive({
      name: "李四",
      age: 19,
});
let arrReactive = reactive([1, 2, 3]);

// let countReactive = reactive(10); // value cannot be made reactive: 10
console.log(personReactive); // Proxy {name: '李四', age: 19}
console.log(arrReactive); // Proxy {0: 1, 1: 2, 2: 3}

console.log(countRef);
console.log(personRef.value); // Proxy {name: '李四', age: 19}
console.log(arrRef.value); // Proxy {0: 'a', 1: 'b', 2: 'c'}