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是测试不出来问题的,因为一直会改变的。区别只在视图有没有响应。