Vue 3中的shallowReactive – 浅层响应式

本文将为您详细介绍Vue 3中的浅层响应式——shallowReactive的定义、使用方法以及常见问题的解决方案。通过学习本文,您将能够更好地掌握Vue 3中的响应式原理,提高Vue开发的效率。

image-20230315120359116

shallowReactive是什么

在Vue 3中,我们可以使用shallowReactive来创建一个响应式对象,与reactive不同,shallowReactive会忽略对象中的嵌套属性响应式更新,只有对象的直接属性发生变化时才会触发更新。

shallowReactive的使用场景通常是,当我们需要创建一个响应式对象,但是不希望其嵌套属性也响应式更新时,可以使用该API。

shallowReactive用法例子

让我们来看一个简单的使用shallowReactive的例子:

import { shallowReactive } from 'vue'

const state = shallowReactive({
  name: '小明',
  address: {
    city: '上海',
    state: '上海'
  }
})

// 修改state对象的直接属性
state.name = '小红' // 触发响应式更新

// 修改state对象的嵌套属性
state.address.city = '北京' // 不会触发响应式更新

在上面的代码中,我们使用shallowReactive创建了一个响应式对象state,其中包含一个直接属性name和一个嵌套属性address。当我们修改state.name属性时,由于该属性是直接属性,所以会触发响应式更新;当我们修改state.address.city属性时,由于该属性是嵌套属性,所以不会触发响应式更新。

除了上述例子中的直接属性和嵌套属性的修改外,我们还可以使用Vue.set方法来给对象添加新属性。当我们使用Vue.set方法添加新属性时,该属性会被视为直接属性,因此会触发响应式更新。让我们来看一个示例

import { shallowReactive } from 'vue'

const state = shallowReactive({
  name: '小明',
  address: {
    city: '上海',
    state: '上海'
  }
})

// 添加新属性
Vue.set(state, 'age', 18) // 触发响应式更新

在上面的代码中,我们使用Vue.set方法向state对象添加了一个新属性age,由于该属性是直接属性,所以会触发响应式更新。

需要注意的是,shallowReactive只会在修改对象的直接属性时触发响应式更新,如果我们想要响应式更新嵌套属性,需要使用reactive或者ref来创建响应式对象。

综上所述,shallowReactive是Vue 3中的一个API,用于创建一个响应式对象,该对象仅仅响应其直接属性的变化,而不会响应其属性所包含的对象的变化。适用于不需要对嵌套属性进行响

© 版权声明
THE END
喜欢就支持一下吧
点赞6 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容