学习vue3第四节（ref以及ref相关api）

主要记录以下api：ref()、isRef()、unref()、 shallowRef()、triggerRef()、customRef()

1、ref() 定义

接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value，.value属性用于追踪并且存储响应式数据的值(包括对象)，当响应式对象变化时会自动追踪更新视图；
如果将一个对象类型赋值给 ref()，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref，它们将被深层地解包
如图：

2、ref使用

ref() 接收的数据，在js中使用需要.value作为唯一的键引用，而在模板中使用只需要直接使用即可，不需要再.value，因vue模板会自动解析ref类型数据；
如图:

<template>
	 年龄：{
   {
    age }}
	 <br>
	 姓名：{
   {
    name }}
</template>
<script setup>
	import {
    ref,  reactive, computed, onMounted, onActivated, unref } from 'vue'
	const age = ref(0)
	const name = ref('Andy')
	onMounted(() => {
   
	  console.log('==age==', age.value)
	  console.log('==name==', name.value)
	})
</script>

3、ref() 接收对象类型时

ref() 接收的对象类型若要里面的属性保持响应式，需要使用.value的方式进行单个属性赋值，如果将声明对象整体赋值，则会导致响应式失效，如：unNormalMan

  unNormalMan