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

最新推荐文章于 2024-03-13 18:03:24 发布
原创 最新推荐文章于 2024-03-13 18:03:24 发布 · 870 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种解决Vue组件使用Keep-Alive缓存导致生命周期函数失效的问题。通过在父组件传值时拼接时间戳，确保每次传值的唯一性，从而触发子组件Watch监听，实现数据更新的有效响应。

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

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

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

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

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

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

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

wath修改data中的值后更新
爱睡的虫虫
09-19 1121
vue wath 修改 data中的值
解决vue2.0 wacth深度监听新值与旧值相同问题
tao20010624的博客
04-18 2642
<template> <div> {{Obj}} {{a}} <button @click="Obj.a=2,a=2">点击改变</button> </div> </template> <script> export default { data() { return { Obj: { a: 1, }, a: 111, .
问题记录：Vue3的watch，如何做到在监听值没变化的情况下调用相关函数去请求接口？
m0_56552249的博客
03-13 1473
PS：一番了解后，因为公司开发的不少管理系统是有关联的，测试在其他系统修改相关规则，想要触发这个系统中的预警......，就不讲业务细节了。1.这个折线图是在一个Modal里的，折线图是子组件的，Modal是父组件的。这种情况下，点击按钮后，通过ref调用子组件方法报错。我先是愣了一下，心想没错啊，watch属性只有当监听的值有变化才会去做相关处理呀。如图所示：Modal是在父组件里写的，Modal里的折线图是在子组件里写的。通过给子组件绑定ref值，然后通过ref访问子组件的方法。
vue的watch属性监听不到数据的变化的解决方案
S_xxcc的博客
04-12 8887
vue踩坑记录
父组件传值给子组件但是值不改变的解决方法
qq_52685664的博客
07-09 1292
在子组件内深度监听值改变，调用加载方法 父组件 <tree-select-edit :inputValue = "inputValue" :fatherId = "contractSectId" /> 子组件 <div class="filter-input searchinput" :opendialog="inputValue" :constractId="fatherId" &g
$attrs中的对象没有变化，但触发了watch监听？
HYeeee的博客
02-14 3135
假设$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)
前端页面打开的时候如何进行一次wacth监听
最新发布
11-11
根据引用[1]和[2]，深度监听需要设置`deep: true`，但用户并没有提到深度监听，只是说页面打开时进行一次。 注意：用户的问题：“前端页面打开时进行一次watch监听” 我们可以理解为：在页面初始化时，执行一次...
wacth监听vuex 数据
01-10
在 Vue 组件中监听 Vuex store 的数据变化可以通过多种方法实现。以下是几种常见的做法： #### 方法一：通过计算属性和 `watch` 这种方法先利用计算属性从 Vuex store 获取状态，再使用 `watch` 来监控该计算属性...
vue3wacth监听props
02-07
此方法适用于当需要基于 prop 改变而执行特定逻辑的情况。 #### 定义 Prop 并使用 Watch 进行监控 下面是一个简单的例子展示如何定义一个接受外部传入属性 (prop) 的子组件，并对其变动做出反应： ```javascript ...
项目中遇到的问题4：请求数据，并用watch监听，刷新页面会执行两遍接口
小羊的博客
12-17 3225
问题描述： 通过项目ID向后端请求数据，数据请求成功后会向数组中push内容，通过watch监听项目ID变化后重新执行这个方法，但接口会执行两遍，数组中也会被push两次，在请求中清空了数组但依然会push两次内容，所以页面显示也会出错 原代码如下： // data中定义了一个空数组studentData，请求到数据后向这个数组中push数据 data() { return { ...
当需要数据（比如id）发生变化和不变化时都可以触发更新或者方法时，不需要用watch监听的方法
weixin_41033048的博客
06-16 893
watch方法只能做到监听数据发生变化时，才能触发相应的数据变动并作出操作。 但是，当我们在第一次触发并且把数据保存起来之后，再次操作则watch并没有监听数值没有发生变化然后再次作出相应的数据变动操作了。这时候，我们需要换个实现方式。 祖父组件 <Popup ref="popup" :dialog-type="type"></Popup> method:{ func(){ this.$refs.popup.toOpen(id) } } 子组件：Popup
解决Vue 使用Watch侦听器监听对象如何取得旧值问题
qq_41777791的博客
08-25 5385
解决Vue 使用Watch侦听器监听对象如何取得旧值问题
vue项目的watch监听事件（修改数据为0但是没有走监听事件）
Hellen90912的博客
11-15 1699
watch监听的值，第一次绑定的时候，不会执行监听函数，只有发生变化才能执行 immediate：true（第一次绑定也会监听到执行handler） 深度监听数组或者对象：deep：true
watch监听第一次生效第二次不生效_javascript – $watch第二次没有触发值更改
weixin_36121354的博客
01-14 1322
使用AngularJS,我试图在一个指令中观察一个元素的scrollHeight(隐藏在两个表中).这种行为很奇怪;第一次值改变时,它会触发我的功能.它第二次没有,然后它的效果很好……我正在观看的scrollHeight是在一张双人桌内：Show RowShow Cell Watch that我的指示是看它：myApp.directive('tracker', function() {return...
vue 中 watch 数据监听
UserGuan的博客
01-19 1448
true：无论值是否发生改变，时刻都会监听false：常规用法，只有值发生改变才会监听true：监听到对象属性内部的改变false：监听不到对象属性内部的改变。
watch监听对象的变化无效（watch监听对象的变化时，变化前的值和变化后的值相等解决方法）
weixin_45393280的博客
12-18 1303
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 2923
转载：https://blog.youkuaiyun.com/yjyRain/article/details/109615162 问题：最近在使用vue做项目时，遇到一个关于子组件用props接收父组件传递过来的数据进行页面渲染时第一次打开页面数据不能加载的问题，我的子组件是一个对话框，第一次打开对话框时不能加载到父组件传递的数据，关闭后从新打开数据才能加载。刚开始我的方法如下： 父组件： 子组件：使用watch来响应数据的变化，普通的监听方式，写一个监听函数，这种方式在对话框第一次打开的时候无法加载到数据。 后来采
vue中的watch数据监听以及watch中各属性详解
m0_49714202的博客
04-28 653
目录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
wacth监听事件的使用
m0_58974838的博客
07-19 944
1.监听器(watch) 1.watch监听器主要是用来监听变量的变化，然后通过对变量的监听，在钩子函数中写入相应的操作。 2.watch监听器会监听data中数据的变化，只要一变化，就能够执行相应的逻辑 3.监听的数据名放到这里面作为函数名，这个函数里面有两个参数，一个是新值，一个是旧值 2.普通监听 注意事项：当值第一次绑定的时候，不会执行监听函数 <input type="text" v-model="age"/> //监听 age值发生变化时触发 watch: {
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值