vue一个计算属性如何监听另一个计算属性

最新推荐文章于 2024-08-22 13:41:17 发布
最新推荐文章于 2024-08-22 13:41:17 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： javascript 文章标签： vue 源码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qingsemengshou/article/details/119348518
版权
本文探讨了Vue中计算属性与Watcher的关系，解释了计算属性如何在使用时才收集Watcher，以及为何在未使用时不会触发更新。重点讨论了计算属性如何在模板中未直接引用data属性的情况下，仍能触发渲染Watcher。通过分析计算属性的初始化过程和依赖收集机制，揭示了计算属性之间看似监听的错觉，并澄清了计算属性不能直接监听另一个计算属性的事实。
摘要由CSDN通过智能技术生成

一般对vue了解不深的都理解不了这个问题，

首先说一下vue的基本知识点:

watcher 分为三种，lazy watcher和 user watcher和渲染watcher

每一个计算属性都对应一个lazy watcher对象，

每一个watch对象的属性都对应一个user watcher对象，

每一个组件都对应一个渲染watcher对象

每一个data中的属性都对应一个dep对象，dep对象是用来收集watcher和通知watcher更新的，

简单来说就是当前属性的watcher管理对象，当获取data中的属性时，会触发属性的get方法，然后当前属性对应的dep对象会进行watcher收集操作，当更新data中的属性时，会触发属性的set方法，然后当前属性对应的dep对象会通知之前收集的watcher进行更新操作

那么，什么是lazy watcher?

观察vue的初始化过程，发现一个重要的知识点，就是user watcher和渲染watcher在创建的时候，就会执行watcher的收集操作

详细步骤是执行watcher的get方法赋值给watcher的value属性，get方法会触发getter方法，getter方法对于user watcher来说会去获取data中属性的值，对于渲染watcher，会去执行更新组件的方法，里面会先执行render方法生成vnode，render方法里

最低0.47元/天 解锁文章
山顶哥
关注
专栏目录
vue-我可以在另一个计算属性中使用计算属性吗？
liuhao9999的博客
08-04 1459
计算属性应该是同步的。但是，如果您仍然在其中使用异步操作，它们可能无法按预期工作，并可能导致意外行为。例如，comboTwo 计算属性使用 comboOne 计算属性，如下所示，如果出于某种原因您仍然喜欢使用异步计算属性，那么您可以考虑使用其他插件，例如。例如，下面不推荐使用 async/await，是的，您可以像访问数据道具一样直接访问它。建议对计算属性使用 async 吗？...
vue3【计算属性与监听-详】
蜗牛~~
11-17 3552
vue3【计算属性与监听-详】
vue 计算属性可以依赖其他计算属性 学习 例子 整理 记录 自学 前端
热门推荐
03-05 1万+
vue 计算属性可以依赖其他计算属性 学习 例子 整理 记录 自学 前端 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div i...
【Vue】计算属性和监听属性
sishihao的博客
08-22 1060
对于使用ref函数定义的基本数据类型，则直接监听即可，示例代码如下：width += 1;} </ script > < template > < div > < p > 宽度：{{ width }} </ p > < button @click = " onUpdateWidth " > 修改width </ button > </ div > </ template >importwidth += 1;
vue中的计算属性
weixin_48864616的博客
12-30 416
计算属性的定义 有时候我们需要在模板中绑定表达式来做简单的数据处理，但是如果表达式太长，就会显得代码非常臃肿而且难以维护。 所以说引入了计算属性 【注意】 虽然我们是以函数的形式写书计算属性的，但是在使用时，不能加（）。 计算属性的特点 （1）计算属性中任意一个实例数据发生变化，计算属性就会重新计算，视图也会更新。 （2） 每一个计算属性都包含一个getter和setter 每调用一次计算属性，就相当于调用一次属性属性的getter，每当计算属性的值发生变化时，会默认调用
vue监听数组中某个属性，计算其他属性问题
weixin_30466421的博客
04-28 973
今天在项目开发中遇到一个根据数组中某个属性变化同时更新另一个属性变化的问题，刚开始代码如下 this.weekList1=r.data.roomProducts; this.weekList1.map(item=>{ item.cus_price=''; item.cus_plaPrice=''; item.cus_addPrice='';}); watch:{ wee...
vue中关于修改数据表格数据也随之变化
baozaoderenlei的博客
03-28 1929
一般出现这种问题是因为vue在利用=赋值时，是一种浅拷贝的方式，它是将赋值的数据的引用给了一个新的变量，这也导致了你改变数据页面数据也发生变化的原因。 最简单有效的方式就是进行深拷贝，它会在堆中新开辟一块内存将数据放进去然后把引用给了被赋值的元素. 简单粗暴的深拷贝 this.vehicleChangeData = JSON.parse(JSON.stringify(this.vehicleChange)); ...
vue计算属性无法监听到数组内部变化的解决方案
10-16
此外，还有一点需要特别注意：如果一个计算属性在当前组件的模板中没有被使用，同时也没有其他变量引用它，那么这个计算属性不会被计算执行。这种情况下，Vue会优化性能，不会执行该计算属性的getter函数，从而导致...
vue计算属性computed、事件、监听器watch的使用讲解
10-17
以上内容详细介绍了Vue计算属性(computed)、方法(methods)、监听器(watch)的使用方法和区别，并通过实例展示了它们在实际开发中的应用。理解这些知识点对于提升Vue.js开发效率和代码质量具有重要意义。
vue计算属性和监听器实例解析
08-27
在Vue.js中，计算属性和监听器是两个非常重要的概念，它们能够帮助开发者在处理数据和视图更新时，写出更加高效和易于维护的代码。 ### 计算属性（Computed Properties） 计算属性是一种基于其响应式依赖进行缓存...
Vue3计算属性和异步计算属性
qq_27368993的博客
10-18 2544
文章目录一、简要介绍二、计算属性核心源码三、异步计算属性核心源码 一、简要介绍 不论是计算属性，还是异步计算属性，都是依托于Vue3整体的响应式原理实现的。其核心依旧是ReacetEffect类。如果对响应式原理不清楚，建议先看响应式原理章节。计算属性和常规的动态响应区别在于它不会主动的去执行ReacteEffect所关联的回调方法，而是用一个标记来表示当前的值是否有改变，如果有改变，则重新调用回调方法获取，如果没改动，则直接获取直接计算的值。 二、计算属性核心源码 export type Computed
vue前端通过判断一个值,更新另一个值的结果
monicateacat的博客
05-09 428
通过对该列表所有行的判断的结果,对我们的"结果"字段进行更新。如方法所示,如果"判断"全为"合格","结果"为"通过",如果有一个不合格,结果就是不通过,否则"结果"就是"不通过".
vue 同时在一个页面监听多个数据
qq_36546490的博客
04-12 855
watch监听多个属性
Vue之计算属性computed
halfgod的博客
04-14 184
啥是计算属性：当一个data变化的时候想监控变化（只想取特定的值）就是计算属性 计算属性用起来像属性，定义起来像方法： 定义： var vm = new Vue({ el: '#example', data: { a:1, b:2, c:3 }, computed: { subAB: function () { return th...
element在表单修改数据时，表格的数据也跟着变化
m0_52243496的博客
06-08 648
关于基本数据类型和引用数据类型： 基本数据类型：string number boolean null undefined 引用数据类型：object（数组 对象） function (引用的是同一块内存单元) 关于深拷贝与浅拷贝： 浅拷贝：只能处理 object中每一个数据都是 基本类型的情况 【解决方法】深拷贝：把引用类型先转成 基本类型string，再还原回引用类型 表格的行数据val是一个object引用类型，故需要深拷贝解决这个问题： ...
vue的data、计算属性一些小细节
cpc980209的博客
06-29 873
vue初始化的顺序：所以一般不会在data里面直接使用computed的值，计算属性是响应式的 Original message: "Hello"Computed reversed message: "olleH"这里我们声明了一个计算属性 。我们提供的函数将用作 property 的 getter 函数：...
HMVue3.2【计算属性】
yubaby
11-19 154
1 计算属性及其特点 2 使用计算属性改造案例 2-1案例-原版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l...
Vue核心④(计算属性)
十八岁讨厌编程的博客
06-04 978
现在我们做一个小案例，如下图所示： 我们创建三个input框，其中第一个框写姓，第二个框写名，第三个框是姓名，也就是将第一个框中的内容和第二个框中的内容中间用连接在一起。同时在修改姓、名的时候姓名会跟着动态的发生变化。这个需求很简单，代码实现如下： 现在我们提一个新需求：不管姓、名有多长，我们永远只截取他们的前三位进行拼接。我们可以用多种方法去实现它：方法①：直接调用api 首先我们的第一反应是直接调用相关的api 代码实现如下： 但是考虑到如果需求变得更加复杂，如果将处理逻辑全写在那个地方，会造成语义不
computed和watch在vue项目中的应用
m0_65274248的博客
11-26 332
computed和watch在vue项目中的应用
vue3计算属性如何监听一个对象属性的变化
最新发布
10-29
Vue 3 中的计算属性（Computed Properties）是用来基于数据动态创建读取值的，它们并不直接监听原始数据的变化，而是依赖于 `get` 和 `set` 函数内部对数据的操作。如果你想监听一个对象属性的变化并触发计算属性的更新，你可以这样做： 1. **监听对象的深度变化**: 使用 Vue 的 `watch` 或者第三方库 like `vue-property-decorator` 的 `computed` 配合 `deep` 参数来监听深层属性的变化。例如: ```javascript import { computed } from 'vue-property-decorator'; export default { data() { return { obj: { prop: '初始值', }, }; }, computed: { // 使用 watch 方法监听 obj.prop 变化 myComputed: computed({ get() { return this.obj.prop; }, set(value) { this.$set(this.obj, 'prop', value); // 使用 $set 更新对象属性，会触发深度检测 }, }), }, watch: { // 或者使用 watch 监听 obj 变化 obj(newObj) { if (newObj !== this.obj) { console.log('obj prop changed'); // 如果你想让 myComputed 自动更新，可以在这里手动触发它 this.myComputed = newObj.prop; } }, }, }; ``` 2. **使用劫持原生 Set 和 Map**: 如果你想更底层地追踪对象的变化，可以考虑使用如 `vue-observer` 这样的库来替换 Vue 的数据绑定机制。 无论哪种方法，都需要记住，Vue 的计算属性本身并不会自动跟踪依赖的改变，你需要明确地通知它。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值