1、这几个都是负责data的存储及读取的，我们常用的是ref,reactive。
2、看一下shallowRef这个,shallowReactive与其类似。
说明：以官网的说明，这个state.value.count = 2是不会触发视图更新的，但是如果直接在<script setup lang="ts"></script>中直接修改的时候，你会发现这个数据是更改了，并且视图也会更新，并不是原始值。
但是如果在onMounted里写，那么这个视图是不会被更新的。
3、那么我们增加一个按钮事件add来触发下，看看效果：
我们会发现，如果只是修改shallowRef的nested.count++，那么也是不会被更新。
有一点先重要，我们把上面的二行注解去掉，add中会同时去更新ref的变量值，再来看看效果：
4、完整代码：
<template><div><h1>Ref</h1>{{ stateref }}<h1>Reactive</h1>{{ statereactive }}<h1>ShallowRef</h1>{{ state }}<input type="text" v-model="state.greet" /><h1>ShallowReactive</h1>{{ stater }}<br /><br /><button @click="add">add</button></div>
</template>
<script setup lang="ts">
import {onMounted,reactive,ref,shallowReactive,shallowRef,unref,
} from "vue";
const statereactive = reactive({count: 1,greet: "Hello, world",nested: { count: 1 },list: [{id: 1,name: "a",},{id: 2,name: "b",},],
});
const stateref = ref({count: 1,greet: "Hello, world",nested: { count: 1 },list: [{id: 1,name: "a",},{id: 2,name: "b",},],
});
const stater = shallowReactive({count: 1,greet: "Hello, world",nested: { count: 1 },list: [{id: 1,name: "a",},{id: 2,name: "b",},],
});
const state = shallowRef({count: 1,greet: "Hello, world",nested: { count: 1 },list: [{id: 1,name: "a",},{id: 2,name: "b",},],
});onMounted(() => {// stateref.value.count = 2;// stateref.value.greet = "Hello, Vue 3";// stateref.value.nested.count = 2;// stateref.value.list[0].name = "c";// console.log(JSON.stringify(unref(stateref))); // 2// statereactive.count = 2;// statereactive.greet = "Hello, Vue 3";// statereactive.nested.count = 2;// statereactive.list[0].name = "c";// console.log(JSON.stringify(unref(statereactive))); // 2// 不会触发更改state.value.count = 2;state.value.greet = "Hello, Vue 3";state.value.nested.count = 2;state.value.list[0].name = "c";console.log(JSON.stringify(unref(state))); // 2// stater.count = 2;// stater.greet = "Hello, Vue 3";// stater.nested.count = 2;// stater.list[0].name = "c";// console.log(JSON.stringify(unref(stater))); // 2// 会触发更改// state.value = { count: 2 }// console.log(state.value.count) // 2
});function add() {state.value.nested.count++;console.log(state.value.nested.count);stateref.value.nested.count++;console.log(stateref.value.nested.count);//如果add中直接调用上面代码，内嵌模式不需要写.value
}
</script>
5、总结：
1）单独的去修改shallowRef,shallowReactive变量的值，值是变了，但是视图是不会被响应的，但是如果我们在<script>...</script>中直接改变量的值的时候，是会更改视图显示的，在onMounted中写是不会的，视图不会响应，但值是变了。
2）如果我们在shallowRef,shallowReactive变量的值改变后，再去修改ref,reactive定义的值的时候，视图变成响应式，这样shallowRef,shallowReactive的视图也会一并被更新。
所以如果有些场景考虑到大数据结构的效率的时候，我们要根据这些原理去使用，这样就简单明了了。如果只是console.log是测试不出来问题的，因为一直会改变的。区别只在视图有没有响应。