玩转Vue3之shallowRef和shallowReactive

前言

Vue3 作为一款现代的 JavaScript 框架,引入了许多新的特性和改进,其中包括 shallowRefshallowReactive。这两个功能在Vue 3中提供了更加灵活和高效的状态管理选项,尤其适用于大型和复杂的应用程序。

Vue 3 的响应式系统

Vue3 引入了新的响应式系统,与 Vue2相比,它具有更好的性能和更多的功能。这个新系统基于 Proxy,为开发者提供了更直观、灵活的API,其中包括ref、reactive、shallowRef和shallowReactive等。之前的文章写过有关响应式系统的解释,在本博客中,我们将深入探讨这两个API,并提供一些具体的例子,以便更好地理解它们的用法和优势。

1.shallowRef:浅层响应式引用

shallowRef 是一个创建响应式对象的函数,与 ref 不同之处在于,shallowRef 只会在对象的第一层进行响应式处理。这意味着当对象的深层属性发生变化时,不会触发视图更新,从而提高了性能。

让我们看一个例子:

js 复制代码
import { shallowRef, watchEffect } from 'vue';

const user = shallowRef({
  name: 'John',
  address: {
    city: 'New York',
    zip: '10001'
  }
});

watchEffect(() => {
  console.log('User changed:', user.value);
});

// 修改深层属性,不会触发视图更新
user.value.address.city = 'San Francisco';

在上面的例子中,watchEffect 只会在 name 属性发生变化时触发,而不会在 address 的变化时触发。这有助于避免不必要的性能开销,这对于一些场景非常有用,例如在处理大型数据集合时,可以提高性能并减少不必要的更新。

2.shallowReactive:浅层响应式对象

shallowRef 类似,shallowReactive 用于创建一个浅层响应式的对象。这意味着只有对象的第一层属性会被响应化,这对于避免在深层次对象中进行递归响应式转换非常有用。

js 复制代码
import { shallowReactive, watchEffect } from 'vue';

const user = shallowReactive({
  name: 'John',
  address: {
    city: 'New York',
    zip: '10001'
  }
});

watchEffect(() => {
  console.log('User changed:', user);
});

// 修改深层属性,不会触发视图更新
user.address.city = 'San Francisco';

在上述例子中,watchEffect 只在 name 属性变化时触发,而 address 属性的变化不会引起更新。

使用场景

1. 性能优化

在处理大型数据集或嵌套对象时,使用 shallowRefshallowReactive 可以提高性能,避免不必要的响应式转换和更新。

2. 避免无限循环

当你在数据模型中存在相互引用的情况时,使用 shallowRefshallowReactive 可以帮助你避免创建无限循环的响应式数据。

3. 更精确的控制

如果你只关心对象的第一层属性,而不希望触发深层次的更新,那么 shallowRefshallowReactive 提供了更精确的控制。

结论

使用 shallowRefshallowReactive 的性能优势在于避免了深层对象的递归侦听,从而减少了触发响应式系统的次数。这对于大型项目和数据结构来说是非常有用的。

通过了解它们的使用方式和性能优势,我们可以更好地利用 Vue3 的响应式系统。始终记住,在使用这些特性时,要根据具体情况权衡性能和开发的便利性,确保你的代码保持清晰、易读和可维护。

相关推荐
qq_308562311 天前
vue3 中引入tinymce富文本
vue3·富文本·tinymce
sen_shan3 天前
Vue3+Vite+TypeScript+Element Plus开发-02.Element Plus安装与配置
前端·javascript·typescript·vue3·element·element plus
路光.3 天前
Vue3实现锚点定位
前端·javascript·vue.js·vue3
wocwin7 天前
uniapp微信小程序封装navbar组件
微信小程序·uni-app·vue3·组件封装·navbar
留白声9 天前
uniapp主题切换功能,适配H5、小程序
前端·css·小程序·uni-app·vue3·主题切换
dr李四维12 天前
uniapp从 vue2 项目迁移到 vue3流程
javascript·vue.js·uni-app·vue3·vue2·vuex·vue迁移
Jiaberrr16 天前
Vue 3 中使用 vue - pdf - embed + vue3 - pdfjs 在线预览 PDF
前端·javascript·vue.js·前端框架·pdf·vue3
努力做大神18 天前
uniapp vue3项目定义全局变量,切换底部babar时根据条件刷新页面
uni-app·vue3
柒@宝儿姐20 天前
如何判断一个项目用的是哪个管理器
前端·javascript·vue.js·vue3
爱看书的小沐20 天前
【小沐学Web3D】three.js 加载三维模型(vue3)
javascript·vue·vue3·webgl·three.js·opengl·web3d