Watch的内部原理（deep+immediate）

最新推荐文章于 2025-03-28 08:57:47 发布
最新推荐文章于 2025-03-28 08:57:47 发布
阅读量1.1k 收藏
点赞数
分类专栏： vue 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42937036/article/details/108615108
版权
本文探讨Vue.js中watch的工作原理，包括它如何监听值变化并触发回调，与computed属性的区别，以及如何避免内存泄漏。通过源码分析，揭示watcher如何收集依赖并在组件卸载时正确清理。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

watch主要用来监听组件中某个值的改变，并执行对应的回调函数。
wtach和computed的区别

  • watch是一个值影响多个值
  • computed是多个值影响一个值

watch的内部原理

先看源码中对于vm.$watch的实现

// watch可以监听一个表达式（a.b.c）或者函数
Vue.prototype.$watch = function (expOrFn, cb, options) {
   
	const vm = this;
	options
最低0.47元/天 解锁文章
100个numpy问题17-100
u011699626的博客
10-17 360
如何交换二维numpy数组中的两行元素，比如： # 要求：交换二维数组中的第一行与第二行元素 # 原始数组 array([[0, 1, 2], [3, 4, 5], [6, 7, 8]]) # 想要得到的数组 array([[3, 4, 5], [0, 1, 2], [6, 7, 8]]) 这个问题类似于100个numpy问题16-100。因此这里不做过多解释，同样给出两种方法。 方法一：使用浅拷贝.copy()与中间变量temp # -*- c.
Watch机制原理解析
10-26 1878
来源： 《从Paxos到Zookeeper》 https://www.cnblogs.com/GrimMjx/p/10922480.html https://blog.youkuaiyun.com/huyangyamin/article/details/77743624 https://www.bilibili.com/video/av32715941?from=search&seid=9380652...
【源码】【watch机制实现原理】
盖世英雄
11-19 478
这里是列表文本客户端创建ZooKeeper对象，ZooKeeper构造函数连接2181端口号，注意，此时并没有传递watch的任何信息，只是在客户端的watchManager.defaultWatcher里面设置此watch对象； 这里是列表文本那么服务器如何知道当前client设置了watch呢？是在客户端调用exists函数的时候，此函数内部会创建ExistsRequest对象，属性watch会设置为true或者false；同时创建RequestHeader对象设置type为exists；这两个对象都.
Vue.js 源码解析：watch 监听的实现原理
最新发布
前端开发探索之旅
03-28 1118
通过以上源码解析，我们可以总结出 Vue.js 中watch在 Vue 实例初始化时，会调用initWatch函数来初始化watch选项。initWatch函数会遍历watch对象的每个属性，为每个属性创建一个Watcher实例。Watcher实例在创建时会调用get方法获取当前的值，并将自己添加到被监听数据的依赖列表中。当被监听的数据发生变化时，会触发update方法，在update方法中会重新获取新的值，并调用回调函数。理解watch。
deep原理 vue的watch_【Vue原理】Watch - 白话版
weixin_39955732的博客
01-17 463
专注 Vue 源码分享，为了方便大家理解，分为了白话版和 源码版，白话版可以轻松理解工作原理和设计思想，源码版可以更清楚内部操作和 Vue的美，喜欢我就关注我的公众号，公众号的文章，排版更好看如果你觉得排版难看，请点击下面链接 或者 关注公众号【Vue原理】Watch - 白话版​mp.weixin.qq.com今天我们用白话文解读 watch 的工作原理，轻松快速理解 watch 内部工作原理。...
源码搬运工——watch()的实现原理
xjc2333333的博客
03-20 2179
所谓watch()，其本质就是观测一个响应式数据，当数据发生变化时通知并执行相应的回调函数。
Vue源码---watch实现原理
m0_56698268的博客
03-22 1194
Vue中watch的实现原理
vue2.0 watch里面的 deep和immediate用法说明
01-18
deep，默认值是 false，代表是否深度监听。 immediate:true代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。 computed: { ...
vue 侦听器watch 之 深度监听 deep 以及 immediate
Don't disturb me!的博客
08-17 2976
<template> <div> <p>FullName: {{person.fullname}}</p> <p>FirstName: <input type="text" v-model="person.firstname"></p> </div> </template> <script> export default { data(){
关于Vue源码vm.$watch()内部原理详解
11-27
总的来说，`vm.$watch()`的内部原理涉及到Vue的响应式机制，包括`Watcher`、`Dep`以及它们之间的交互。通过创建`Watcher`实例并将其添加到依赖关系中，Vue能够确保在数据变化时准确地执行回调函数，从而实现视图的...
deep原理 vue的watch_vue watch原理
weixin_42118423的博客
01-17 401
结论1、很多情况下，computed和watch可以实现相同的功能；2、当需要在数据变化时执行异步或开销较大的操作时，使用watch会更好一些。因为computed会立即返回，此时异步操作可能还没有完成；3、因为数据是响应式的，使得watch有意义。并不是因为watch了才使得数据是响应式的。4、使用immediate:true，会在初始化watch时就立即执行handler回调函数，而不用等下一...
Vue之watch监听的原理
玉案轩窗的博客
10-16 6013
前言 vue选项中props、data、watch、methods、computed，其中props、data、computed都通过Object.defineProperty进行数据拦截从而实现响应式。对于选项watch，知道其作用是监听对应key做相关处理，之前一系列文章都没有关注watch背后的实现逻辑，这也是本文的目的。
deep原理 vue的watch_vue watch的immediate和deep
weixin_32484897的博客
01-17 338
vue中的watch有immediate和deep两个配置参数，看看是咋用的。immediate假设我们页面上有一个搜索框，每次输入内容的时候去请求一个接口，同时一进页面的时候需要调一下这个接口，我们可能一般这样写：这是一个输入框：const app = new Vue({el: '#app',data:{value:'',},watch:{'value':'getData'},mounted:f...
Vue.js中 watch(深度监听)的最易懂的解释
张议的博客
11-12 3751
文章目录Watch监听handler方法和immediate属性deep属性注销watch Watch监听 <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> <...
vue中computed与watch的区别及用法
weixin_40030173的博客
01-22 696
侦听器 <template> <div> <input type="text" v-model="val1" />+ <input type="text" v-model="val2" />={{ val0 }} </div> </template> <script> export default { data() { return { val1: "", val2
Vue中使用箭头函数注意事项
np918的博客
08-01 2011
在Vue中watch中使用了箭头函数 props:{ price:{ type:Number, num:0 } }, data(){ return{ priceDefault:0 } } watch:{ price:(val,ind)=>{ console.log(val,ind) } } 死活不起作用。 解决办法 翻了下vue中关于watch的说明文档，末尾...
watch的immediate使用
热门推荐
Moqin
11-15 4万+
watch的immediate使用 对于watch的使用大家都还是比较熟悉的，我们平时使用的比较多的就是watch一个变量，偶尔还是使用deep：true来监听对象，但是immediate的使用就相对比较少，之前有遇到过这个属性，而且也查找过资料，但是一直都是有点懵懵的，要深刻去理解他，我们还是主要是从它的作用，需要在那种情境下使用它 首先我们理解下watch的使用 首先确认 watch是一...
vue3源码系列之监听函数watch原理剖析
weixin_42373116的博客
05-10 428
前言 继上次分析完computed之后，本来主要是用来分析watch的底层原理是如何实现的。大家都知道watchAPI也是开发中用的很多的api，此api用法超级简单但是细节部分很多。关于watch中的诸多细节会在这里给大家一一举例讲述。 分析流程 简单使用 手写简单源码 源码对照 (包括细节描述) 什么是细节描述呢？？？ 什么时候下直接传值 什么时候下需要用到函数 监听ref, reactive分别执行什么场景 deep的场合下该如何处理 ...
watch监听的immediate:true理解
weixin_42484910的博客
07-21 1万+
解释immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。所以当为true时在created周期里就可以不用在写已经在watch中写过的方法了。...
Vue watch的immediate、deep怎么去理解？
03-31
immediate为true时，表示在组件初始化时，立即执行一次watch的回调函数。如果不设置immediate，那么默认不会在组件初始化时执行回调函数。 deep: deep为true时，表示深度观察，即侦听器会递归监听对象内部值的变化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值