[vue2/vue3] 详细剖析watch、computed、watchEffect的区别，原理解读

已于 2024-09-01 16:11:45 修改
阅读量2.4k 收藏 57
点赞数 70
CC 4.0 BY-SA版权
分类专栏： vue2/3 从基础到起飞 文章标签： javascript 前端 vue.js 开发语言 安全 前端框架 ai
于 2024-07-01 16:56:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78542842/article/details/140045758

 🚀 个人简介：某大型国企资深软件开发工程师，信息系统项目管理师、CSDN优质创作者、阿里云专家博主、华为云云享专家，分享前端后端相关技术与工作常见问题~

💟 作    者：码喽的自我修养❣️
📝 专    栏：vue2/3 从基础到起飞

🌈 若有帮助，还请 关注➕点赞➕收藏  ，不行的话我再努努力💪💪

​

🌈🌈文章目录

一、watch

1.使用语法

2.watch的实现原理 

二、computed

1.简单使用

2.computed的实现原理

三、watchEffect

1.简单使用

2.小结

3.watchEffect的实现原理

4.注意事项

1. 避免过度监听

2. 异步操作需谨慎处理

3. 避免无限循环

四、实际开发当中该怎么去选择

 1.watch

1.1 异步操作触发

1.2 深度监听

2.computed

2.1 派生数据 

2.2 性能优化

3.watchEffect

3.1 自动依赖追踪

3.2 动态数据处理

五、总结

了解本专栏 订阅专栏 解锁全文 超级会员免费看
vue3.0 源码解析二 ：watch 和 computed原理解析
zl_Alien的博客
08-24 2453
之前的文章详细的介绍了vue3.0 相应式原理，知道了用proxy代替Object.defineProperty 的利与弊，了解了依赖收集和派发更新的大致流程，知道了vue3.0响应式原理，这节我们一起研究vue3.0中的 watch 有那些变化。 一 watch 和 watchEffect 之前我们讲解到，vue3.0取消了渲染watch概念，取而代之的effect副作用钩子，来完成当依赖项更改而促使视图。 /* 创建一个渲染 effect */ instance.update = effect(fun
vue3学习教程第六节（vue3 中 computed watch watchEffect）
刺客-Andy 的博客
03-15 828
vue 项目中 computed() 、watch() 、watchEffect()的使用以及注意事项
Vue computed/watch原理
study_way的博客
09-06 997
Vue.js 是一个流行的 JavaScript 前端框架，它提供了一种声明式的方式来构建用户界面。Vue 中的计算属性 (computed) 和监听属性 (watch) 是两个重要的特性，用于处理数据的响应式更新和副作用。
Vue 3 中 computed 和 watch 的区别 + 原理 + 写法详解
最新发布
Jinxiansen0211的博客
06-30 648
Vue 3 中 computed 和 watch 的核心区别在于：computed 用于声明式返回派生数据并缓存结果，适合模板绑定；watch 用于响应数据变化并执行副作用操作，适合异步请求或逻辑处理。computed 自动追踪依赖，而 watch 需手动配置监听对象。watch 有三种写法：监听单个 ref、数组监听多个值、函数式监听表达式，还支持深度监听等高级选项。computed 可设置 getter/setter 实现双向绑定。选择原则：需要返回值用 computed，需要响应变化做操作用 watc
vue3 computed、watch和watchEffect的特性区别
MM_520131400的博客
04-27 771
vue3 computed、watch和watchEffect的特性区别
watch和computed
qq_63140280的博客
06-22 251
计算属性是依靠返回值来实现的，所以不能去实现异步操作，具体实现步骤：当模板第一次解析的时候，调用getter方法对其值进行计算，然后保存缓存返回模板进行渲染，以后如果所依赖的数据源不发生改变，它是不会从新解析计算的而是从缓存中读取，如果依赖的数据源发生改变了，则会再次调用getter方法重新解析计算缓存渲染更新。watch是侦听属性，一般有两种写法，对象的写法比较全面，可以实现深度监听，还有一种就是方法的写法，比较常用是对象写法的阉割版。2，监听多个数据源变化，需要监听数组或者对象的变换。
【Vue3源码学习】响应式 api: watchEffect | watch 的实现原理
ColdCoder的博客
03-04 2375
在 Vue2中watch 是 option 写法中一个很常用的选项，使用它可以非常方便的监听一个数据源的变化，而在 Vue3 中watch 独立成了一个 响应式api。 源码地址：packages\runtime-core\src\apiWatch.ts watchEffect 由于 watch中的许多行为都与 watchEffect 一致，所以 watchEffect 放在首位讲解，为了根据响应式状态自动应用和重新应用副作用，我们可以使用 watchEffect 方法。它立即执行传入的一个函数，同时响应式
第五节: 带你全面理解 vue3 中 computed, watch, watchEffect 组合式API的使用
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
05-21 930
前言: 上一章, 带大家分析了vue3核心响应式API中的三个, 即reactive,ref, readonly. 本章将会带大家分析另外几个工作中比较常用的组合式API. 1. computed 计算属性 在vue2中, 我们是通过computed选项添加计算属性的, 关于计算属性的本质, 这里就不过多阐述了, 如果还有不了解的同学, 可以去看vue2专栏中,关于computed计算属性讲解 1.1. computed 基本使用 computed组合式API, 接受一个 getter 函数作为参数，
【Vue3】的watch，watchEffect侦听器分析
binqian的专栏
08-12 378
vue3的watch和watchEffect方法的实现分析。watch和watchEffect的一些区别
Vue3_2024_5天【vue2（3种）和vue3（5种）中watch的使用场景】watch、computed
qq_41930094的博客
03-05 811
watch概念：允许你在数据变化时执行特定的逻辑（方法），从而实现更复杂的数据处理和业务逻辑。
Vue 源码（四）Computed 和 Watch 原理
自己整理的一些前端知识
08-11 278
highlight: tomorrow-night-eighties theme: cyanosis 前言 通过这篇文章可以了解如下内容 计算属性响应原理 侦听器响应原理 计算属性和侦听器的区别 Computed 初始化过程 Vue 的计算属性在两个地方都有初始化过程，一个是在initState中，一个是在Vue.extend中 在initState 中 ```javas...
Vue2中watch与Vue3中watch对比和踩坑
qq_40792800的博客
08-14 2944
Vue3 中的 watch 是一个函数，接收三个参数，第一个参数是需要被监听的数据( 可以是单个数据，也可以是数组格式的多个数据 )，第二个参数是回调函数，第三个参数则是监听配置项( 深度监听、初始化监听 )。该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深，也就是说即使监听的是一个对象形式的数据，只要对象内部属性发生变化，都能被监听到。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。简单监听：监听的是一个回调函数，当监听的值发生改变时，才会执行监听动作。
computed watch原理理解
qq_44852448的博客
03-28 510
一、new Vue()的执行过程 1.1 数据劫持和初步渲染 function Vue (options) { // 初始化 this._init(options) // 执行render函数 this.$mount() } Vue.prototype._init = function (options) { const vm = this // 把options挂载到this上 vm.$options = options if (options.data) { //
vue3的计算属性computed和 vue2 computed 的有什么区别，使用，计算属性传参？
m0_61040489的博客
04-12 1846
如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。
computed和watch和watchEffect 相同和不同
weixin_49035434的博客
01-16 677
2.当响应式数据变化需要执行异步操作，如从服务器获取数据，watch 可以在数据变化后触发这些操作，并处理异步操作的结果。1.自动收集依赖: watchEffect 会自动追踪执行过程中用到的响应式状态, 并在状态发生变化时重新执行.响应性: 都是Vue响应式系统的一部分, 都会自动追踪依赖的响应式数据, 并在这些数据变化时重新执行.1. 缓存: 计算属性会缓存结果, 只有当依赖项发生变化时, 计算属性才会重新计算.1. 无缓存: watch不会缓存数据, 它会在每次依赖的响应式数据变化时执行.
watch和computed的区别及原理
Tan_PF的博客
11-05 1418
watch和computed的区别和原理，computed是如何运行的
computed和watch 原理源码理解。
weixin_42782004的博客
09-26 404
computed和watch的区别是computed具有缓存。
computed和watch的区别 及原理
m0_74079648的博客
06-12 1926
区别：computed 支持缓存 依赖其他属性值 只要当依赖的属性值发生改变的时候 才会从新计算 而且computed不支持异步 如何里面有异步的话 那么无法监听数据改变，watch 不支持缓存 监听一个属性值 当属性值发生改变的时候 watch触发 支持异步 computed和watch都是依赖vue追踪机制为基础。
vue3——computed、watch、watchEffect、生命周期、hooks、toRef
h_jQuery的博客
09-07 978
vue3.x computed函数 与vue2中computed配置功能一致 import { computed } from "vue"; setup(){ //简写 let test = computed(()=>{ return 1+1 }) //完整 let demo =computed({ get(){ return 1+1 }, set(value){ value+1 } }) } watch函数 与Vue2.x中的watch配置功能一致 监视的是
评论 48
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码喽的自我修养

您的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值