wacth监听是值改变才会执行，那么组件传值，值没变，这时候需要进行操作，怎么办呢？

最新推荐文章于 2024-03-13 18:03:24 发布
最新推荐文章于 2024-03-13 18:03:24 发布
阅读量780 收藏
点赞数 3
分类专栏： vue+element项目bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CuiCui_web/article/details/108120660
版权

看似这个问题是无解的，组件传值，值没变，然后启用了keep-alive，生命周期函数，只有初次有效。这时候该怎么去解决这个问题呢？

思路： 我们让传值的这个字段发生变化，并且只要操作了，就让他与众不同。

怎么与众不同呢，拼接随机数？ 随机数也是可以相同的； 我们可以拼接时间。在传值前进行拼接，这时候永远都会执行watch监听，然后在watch监听中进行截取。

父组件中：(引入子组件，并传值）
在这里插入图片描述
在这里插入图片描述
子组件watch监听中：
在这里插入图片描述

这里注意，如果界面进行缓存了，在tab切换，生命周期失效的时候，在父组件的钩子函数中进行一次截取再拼接（tab切换数据是被keep-alive进行缓存了的）

父组件中添加路由钩子函数，对缓存的值进行改变
在这里插入图片描述

本文是利用了一个小技巧，传值的唯一性来解决的。 如果您有更好的方法，留言分享下，谢谢！

别忘了微笑_cuicui
关注
专栏目录
watch监听第一次生效第二次不生效_javascript – $watch第二次没有触发值更改
weixin_36121354的博客
01-14 1182
使用AngularJS,我试图在一个指令中观察一个元素的scrollHeight(隐藏在两个表中).这种行为很奇怪;第一次值改变时,它会触发我的功能.它第二次没有,然后它的效果很好……我正在观看的scrollHeight是在一张双人桌内：Show RowShow Cell Watch that我的指示是看它：myApp.directive('tracker', function() {return...
解决Vue 使用Watch侦听器监听对象如何取得旧值问题
qq_41777791的博客
08-25 5133
解决Vue 使用Watch侦听器监听对象如何取得旧值问题
问题记录：Vue3的watch，如何做到在监听值没变化的情况下调用相关函数去请求接口？
最新发布
m0_56552249的博客
03-13 769
PS：一番了解后，因为公司开发的不少管理系统是有关联的，测试在其他系统修改相关规则，想要触发这个系统中的预警......，就不讲业务细节了。1.这个折线图是在一个Modal里的，折线图是子组件的，Modal是父组件的。这种情况下，点击按钮后，通过ref调用子组件方法报错。我先是愣了一下，心想没错啊，watch属性只有当监听的值有变化才会去做相关处理呀。如图所示：Modal是在父组件里写的，Modal里的折线图是在子组件里写的。通过给子组件绑定ref值，然后通过ref访问子组件的方法。
$attrs中的对象没有变化，但触发了watch监听？
HYeeee的博客
02-14 2640
假设$attrs中有个变量info 1、当info不管是基本数据类型还是引用数据类型时， 都存在以下问题： 不管这个对象改没改变，watch都认为它改变了 <card :info="info"></card> data中的info: {a:1} // 为1 同样有这个问题 // 在card组件中监听 watch: { '$attrs.info': { handler(newV, oldV){ console.log(newV == oldV)
vue项目的watch监听事件（修改数据为0但是没有走监听事件）
Hellen90912的博客
11-15 1520
watch监听的值，第一次绑定的时候，不会执行监听函数，只有发生变化才能执行 immediate：true（第一次绑定也会监听到执行handler） 深度监听数组或者对象：deep：true
vue 中 watch 数据监听
UserGuan的博客
01-19 1263
true：无论值是否发生改变，时刻都会监听false：常规用法，只有值发生改变才会监听true：监听到对象属性内部的改变false：监听不到对象属性内部的改变。
vue父子组件传值，子组件需要获取父组件一个变化的值，但是子组件视图没有随获取的数据变化而变化？？
Love_yl的专栏
07-09 646
1、场景： 父组件：是一个数据列表页，需要在获取到列表中的数据总条数之后，将数值传递给子组件。 子组件：分页，获取父组件的数据总量后，进行for循环分页。 2、视图效果： 正确的视图显示 错误的视图显示 3、问题描述及代码呈现 当进入也页面时，分页显示为“错误的视图显示”，刷新页面也不管用。 //****************父组件************// <template> <div class="table...
wacth监听事件的使用
m0_58974838的博客
07-19 846
1.监听器(watch) 1.watch监听器主要是用来监听变量的变化，然后通过对变量的监听，在钩子函数中写入相应的操作。 2.watch监听器会监听data中数据的变化，只要一变化，就能够执行相应的逻辑 3.监听的数据名放到这里面作为函数名，这个函数里面有两个参数，一个是新值，一个是旧值 2.普通监听 注意事项：当值第一次绑定的时候，不会执行监听函数 <input type="text" v-model="age"/> //监听 age值发生变化时触发 watch: {
对点问题——dialog在父组件里，第一次进页面不能监听到父组件向子组件传递的值（父：talentDetail 子：po,offer），dialog直接在子组件里并直接引用可以监听到(父：docume
NaNa309706的博客
08-29 641
第一类情况 子组件： 父组件引用情况一： 此种情况下可以监听到 父组件引用情况二： 此种情况下监听不到 原因分析： 情况二的时候加v-if 所以只有当条件为true时才会渲染子组件，所以父级页面最开始并不存在子组件，当点击对话框十七显示时，这时是第一次渲染子组件，而子组件的值并未变化,所以watch不到，而情况一的时候父级页面最开始渲染过子组件，所以当点击使其显示时，...
vue组件内数值做watch监听，首次监听不到的问题
ying940718的博客
10-18 5193
在vue中会使用很多子组件，有时因为组件的类型等原因会导致数据监听不到的情况，下面列举几种问题和解决方法 子组件内数据首次监听不到时，可以使用【immediate】方法，其值是true或false；immediate:true代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法 watch:{ uploadImageUrl:{ immediate:true, h...
vue中watch和computed为什么能监听到数据的改变以及不同之处
10-15
主要介绍了vue中watch和computed为什么能监听到数据的改变以及不同之处,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue路由使用以及组件扩展（1.定义vue组件、父子组件传值、ref的使用、Vue中路由的使用、计算属性和监听器、method、computed和watch的区别）
weixin_48780364的博客
11-02 294
vue路由使用以及组件扩展（定义vue组件、全局组件定义的三种方式、组件中展示数据和响应事件、使用components属性定义局部子组件、使用flag标识符结合v-if和v-else切换组件、使用:is属性来切换不同的子组件，并添加切换动画、父组件传值子组件、 ref的使用、Vue中路由的使用、路由的跳转、路由重定向、选中路由高亮、组件的嵌套、命名视图、计算属性和监听器、Computed用法、method、computed和watch的区别）
watch监听对象的变化无效（watch监听对象的变化时，变化前的值和变化后的值相等解决方法）
weixin_45393280的博客
12-18 1205
watch监听对象的变化时，打印出来的变化后的值和变化前的值（newVal）和旧值（oldVal）是一样的，如何解决？ 先看之前的代码 父组件App.vue给子组件传递过来一个对象tempObj， <template> <div id="app"> <father :dataList="list" :tempObj="tempObj" /> </div> </template> <script> import fath
解决vue中用watch监听父组件向子组件动态传递的数据时第一次不能加载的问题
ProGram_Java521的博客
03-27 2790
转载：https://blog.csdn.net/yjyRain/article/details/109615162 问题：最近在使用vue做项目时，遇到一个关于子组件用props接收父组件传递过来的数据进行页面渲染时第一次打开页面数据不能加载的问题，我的子组件是一个对话框，第一次打开对话框时不能加载到父组件传递的数据，关闭后从新打开数据才能加载。刚开始我的方法如下： 父组件： 子组件：使用watch来响应数据的变化，普通的监听方式，写一个监听函数，这种方式在对话框第一次打开的时候无法加载到数据。 后来采
vue中的watch数据监听以及watch中各属性详解
m0_49714202的博客
04-28 579
目录1、watch使用的几种方法2、详解watch中的immediate、handler和deep属性3、总结 1、watch使用的几种方法 （1）通过watch监听data数据的变化，数据发生变化时，就会打印当前的值 watch: { data(val, newval) { console.log(val) console.log(newval) } } （2）通过watch监听docData数据的变化，数据发生变化时，this.change_num
vue2的watch监听属性
热门推荐
weixin_49986131的博客
04-07 1万+
监听属性： 1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作 2.监视的属性必须存在，才能进行监视！！（在data里或者computed里） 3.深度监视： (1).Vue中的watch默认不监测对象内部值的改变（一层）。 (2).配置deep:true可以监测对象内部值改变（多层）。 备注： (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！ (2).使用watch时根据数据的具体结构，决定是否采用深度监视。 以下代码： watch:{ isHot:{ im
vue的watch属性监听不到数据的变化的解决方案
S_xxcc的博客
04-12 8382
vue踩坑记录
Vue计算属性computed和监听属性watch的区别
叶子yes的博客
09-24 2834
我们希望一个变量是经过某种计算然后输出而不是直接输出的时候可以使用到计算属性，计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。而每次调用函数都会导致函数的重新执行。计算属性就是拿着Vue实例已有的属性计算或处理完后返回的一个全新的所以计算属性是一个属性，我们可以在插值语法中直接使用。
vue中watch的详细用法
weixin_49203377的博客
10-22 507
在vue中，使用watch来响应数据的变化，用法一般是同简单的用法 <input type="text" v-model="personName"/> new Vue({ el: '#root', data: { personName: '小明' }, watch: { peosonName(newName, oldName) { // ...(触发相应的操作或者执行相应的函数) } } }) immediate和handler 这样直
vue wacth监听数据
02-17
在 Vue.js 中，可以使用 `watch` 选项来监听数据的变化。`watch` 可以监视单个属性或一个表达式，并在监视目标发生变化时触发回调函数。 例如，假设我们有以下数据： ```javascript data() { return { firstName...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值