shallowReactive 与 shallowRef

• shallowReactive：只处理对象最外层属性的响应式（浅响应式）。

• shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。

• 什么时候使用?

  • 如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。

  • 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。

代码演示

        shallowReactive

        我们在组件中使用shallowReactive方法定义了一个对象 我们返回对象将对象的属性在模板中使用

        我们修改数据只有定义在对象第一层的属性 才是响应式的 深层次的数据将不在具有响应式的功能 因为深层次的数据将不在是一个响应式对象 而是一给普通对象

 数据变了 但是vue监测不到 无法触发页面的更新

shallowRef

        我们调用了shallowRef方法传递了基本数据类型 我们可以看到 当前属性是有响应式的

...
姓名：{{ sum}}
点击+

...setup() {// 定义了一段数据let sum = shallowRef(0);// 将数据返回出去return {sum,};},
...

        但我们点击修改数据 在页面中 可以看到是有响应式功能的 

        但是我们现在传递一个对象进去 我们可以看到 传递的对象将变成一个普通对象 不在具有响应式功能了 

...
姓名：{{ sum.n}}
点击+
...
setup() {// 定义了一段数据let sum = shallowRef({      // sum将不在是一个响应式对象 n: 0});// 将数据返回出去return {sum,};},
...

在页面中我们可以看到 修改数据后将不在触发页面的更新 因为vue监测不到了 

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！