Vue3.0响应式ref()函数与reactive()函数

ref()函数

ref函数能定义一个响应式的数据
ref()会返回一个包含响应式数据的对象,里面有value属性,这个属性里面存放的就是我们传入的数据,通过.value去修改数据,不能将这个解构赋值出来(解构出来后不会成为响应式)
原理:监听ref中的value的改变,劫持value属性的setter getter,因此一般用在基本数据,或者引用数据的嵌套层级不深的数据上(嵌套层级太深的话,监听的属性就更多,会将所有的属性都监听)

ref使用

需要import从vue中引入:import {ref} from ‘vue’

<script setup>
	import {ref} from 'vue';
	let num = 0;
	let msg = ref(num) //让num成为为响应式数据
	function fn() {
		msg.value++;
		console.log(msg)
	};
</script>

此时调用fn()时,msg都会通过.value去重新渲染页面使msg数据刷新

reactive()函数

reactive使用

需要import从vue中引入:import {reactive} from ‘vue’
reactive也是响应式的设计,与ref一样底层都是采用ES6的Proxy,与ref不同的是reactive用来响应式代理引用数据会更好

<script setup>
	import {reactive} from 'vue';
	
	let obj = reactive({
		name:"Tom",
		age:18
	});
	function fn1() {
        console.log(obj)
		obj.age++;
	}
</script>

与ref函数不同的是reactive函数是代理的是引用数据类型,而ref是劫持了引用数据的属性,当引用数据嵌套层级过多的会对性能造成影响，因此当引用数据嵌套过多时使用reactive更好。