vue3响应式代理基础

reactive

reactive返回的是一个对象的响应式代理，返回的是一个深层响应式对象，也可以使用shallowReactive()创建
缺点：只能返回对象的响应时代理

<template>
    <div>{{ stu.name }} </div>
</template>

<script setup>
  import {reactive} from 'vue'
	const stu = reactive({
	    name:'孙悟空'
	})

ref

ref() 接收任意值，并返回它的响应式代理
ref() 生成相应式代理时，他是将值包装为了一个对象 —》{value:0}
访问ref对象时，必须通过对象 .value来访问其中的值
在模板中，ref对象会被自动解包

<template>
    <div>{{ count }} sferf </div>
</template>

<script setup>
import {ref} from 'vue'
const count =  ref(0)
console.log(count.value)

</script>

$ref

$ref 是 ref() 的语法糖
可以不用.value解包，$ 是一个实验性，在项目中最好不是使用，要使用要在vite插件中做一些配置 reactivityTransform:true
vite.config.js

 reactivityTransform:true

ref 不是顶层对象不会自动解包

<template>
    <!-- <div>{{ stu.name }} </div> -->
    <div>
       <p>{{ obj.name }}</p>
       <p>{{ obj.age+1 }}</p>
       
       <p>{{ obj2.name }}</p>    <!--不会自动解包，要想正常使用 要 obj2.name.value和bj2.age.value->
       <p>{{ obj2.age+1 }}</p>
       
        <p>{{ name }}</p>  
       <p>{{ age+1 }}</p>
    </div>
</template>

<script setup>
import {ref} from 'vue'

const obj =ref({name:'莉莉',age:21})
const obj2 = {
     name:ref('莉莉'),
     age:ref(21)
}
const {name,age} = obj2   //解构赋值   

</script>

渲染结果：