Vue3响应式API ref和reactive

在vue3中,有两个重要的api分别是ref 和reactive
使用方法如下

import {
      reactive, ref } from 'vue';

setup(){
     
	let student = reactive({
     
	    name: "zhangsan",
	    age: 18
	})
	let count = ref(0);
	return {
     
		count,
		student
	}
}

基本数据类型使用ref对象创建响应式,复杂数据类型使用reactive创建响应式,
在js文件中操作ref对象创建的值需要使用 .value 在模板中则可以直接使用,因为在模板中会自动添加.value
其实ref对象也可以传入一个复杂数据类型,当传入一个复杂数据类型时在内部会自动将.value的值转换为一个reactive对象,如下

let a = {
     
    name: "zhangsan",
    age: 18
}
let student = reactive(a)
let refStudent = ref(a)
//student=== refStudent.value      ==> true