vue3中,ref()、reactive()、computed()、watch() 和 watchEffect()的区别

ref()、reactive()、computed()、watch() 和 watchEffect() 是 Vue 3 中常用的响应式处理函数,它们的主要区别如下:

  1. ref():ref() 函数用于将一个普通的 JavaScript 值转化为响应式对象。它返回一个具有 value 属性的对象,我们可以通过访问 value 属性来获取或修改值。当我们对 ref() 返回的对象的值进行修改时,Vue 会自动追踪这个修改,并在界面上同步更新。

  2. reactive():reactive() 函数用于创建一个响应式的对象。与 ref() 不同的是,它接受一个普通 JavaScript 对象作为参数,并返回一个代理对象,通过这个代理对象,我们可以访问和修改原始对象的属性。当我们修改这个代理对象的属性时,Vue 会自动追踪这个修改,并在界面上同步更新。

  3. computed():computed() 函数用于创建一个计算属性。它接受一个计算函数作为参数,并返回一个响应式对象。当计算函数中依赖的响应式数据发生改变时,Vue 会重新计算计算属性的值。计算属性可以像普通属性一样在模板中使用,而且在多个模板中只会计算一次。

  4. watch():watch() 函数用于监听一个响应式数据的变化,并在数据变化时执行指定的回调函数。它接受两个参数:要监听的数据和回调函数。当被监听的数据发生改变时,回调函数会被触发,可以在回调函数中执行一些逻辑操作。(手动监听,并执行自定义函数)

  5. watchEffect():watchEffect() 函数也用于监听响应式数据的变化,但它更像是一个自动运行的副作用。它接受一个函数作为参数,并立即执行这个函数。在函数中,我们可以访问到响应式数据,并在响应式数据发生改变时重新执行这个函数。watchEffect() 不需要明确指定要监听的数据,它会自动追踪函数中使用到的响应式数据。(自动监听,并执行自定义函数)

总结起来,ref() 用于创建简单的响应式数据,reactive() 用于创建复杂的响应式对象,computed() 用于创建计算属性,watch() 用于监听特定数据的变化并执行回调函数,而 watchEffect() 则可以在函数中使用响应式数据并自动追踪数据的变化。

相关推荐
编程猪猪侠20 分钟前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞24 分钟前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路1 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9491 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8681 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie1 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_1 小时前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
你听得到111 小时前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
风清云淡_A1 小时前
【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能
前端·react.js
@大迁世界1 小时前
第7章 React性能优化核心
前端·javascript·react.js·性能优化·前端框架