vue3 响应式API Ref和Reactive 中的一些细节

shallowRef(浅响应式)

const state= shallowRef({count:1}); state.value.count+=2; // 不会触发页面的响应式更新 state.value={count:2} // 才会触发更新 

数据更新

响应式数据的更新*(响应式数据更新是同步的),带来了DOM的自动更新,但是DOM的更新不是同步的*,这意味这当响应式数据发生改变之后,我们去获取DOM值,拿到的还是之前的DOM值

如果要获取更新过的DOM数据要使用nextTick

shallowReactive(第一层的数据改变会触发更新)

和上面shallowRef作用一样

const state= shallowReactive({count1:1,nested:{count2:2}}); state.count1+=2; // 会触发页面的更新 state.nested.count2+=2 // 不会触发更新 

reactive的局限性

当对reactive对象进行解构时会丢失响应式

在部分函数传参中会丢失响应式

let testReactive = reactive({ 	count: 1, }); onMounted(() => { 	setTimeout(() => { 		func(testReactive); // 传递一整个reactive对象响应式不会丢失         func(testReactive.count); // 传递reactive对象的某个值响应式丢失 	}, 1000); });  const func = (state) => { 	state.count ? (state.count = 4) : (state = 2); }; 

ref解包细节

const name1 = ref(1); const name2 = reactive({ name1 }); console.log("n1", name1.value); // 1 console.log("n2", name2); // 1 自动解包 (解构出name1再加.value) 

如果时shallowReactive就不会自动解包

1. 为什么 Bill 渲染出来有双引号？
2. 为什么 2 秒后界面没有渲染 Smith ？

答案：

1. 因为使用的是 shallowReactive，shallowReactive 内部的 ref 是不会自动解包的
2. 1秒后，obj.name 被赋予了 John 这个字符串值，这就使得和原来的 ref 数据失去了联系

如果想要渲染出 Smith，修改如下：

import { ref, shallowReactive } from 'vue' const name = ref('Bill') // name 是一个 ref 值 const obj = shallowReactive({   name }) setTimeout(() => {   name.value = 'John' }, 1000) setTimeout(() => {   name.value = 'Smith' }, 2000) 

2. 数组和集合里面使用 ref

如果将 ref 数据作为 reactvie 数组或者集合的一个元素，此时是不会自动解包的

// 下面这些是官方所给的例子 const books = reactive([ref('Vue 3 Guide')]) // 这里需要 .value console.log(books[0].value)  const map = reactive(new Map([['count', ref(0)]])) // 这里需要 .value console.log(map.get('count').value) 

3. 在模板中的自动解包

在模板里面，只有顶级的 ref 才会自动解包。

上面的例子，感觉非顶级的 Ref 好像也能够正常渲染出来，仿佛也是自动解包了的。

但是实际情况并非如此。

例如我们在模板中各自加 1 就会发现上面因为已经解包出来了，所以能够正常的进行表达式的计算。

但是下面因为没有解包，意味着 object.id 仍然是一个对象，因此最终计算的结果为 [object Object]1

因此要访问 object.id 的值，没有自动解包我们就手动访问一下 value

-EOF-