vue如何移除watch监听?

从列表进入详情页,携带参数,列表页为了保持在固定的位置,用了keep-alive包裹,这样的话进入详情页就需要watch监听路由来获取参数

watch: {
	$route: {
		handler() {
			// do some thing
		},
		immediate: true // 立即监听
	}
}

然而问题来了,
因为监听的是当前路由,
返回上一页时也会触发watch
此时会丢失参数,
可能导致业务逻辑报错。
我的第一反应是在handler函数体中做判断,
不执行对应代码。
一顿操作,目的达到了,
但是watch依然会触发。
作为一个有节操的程序猿,
是不允许这样的,
于是就想着如何移除watch
就像document.removeListenr这样,安排!!!

data() {
	return {
		watchRoute: () => {}
	}
}
// 定义监听函数
created() {
	this.watchRoute = this.$watch(
	// 此处被监听的对象必须是一个函数,否则会报错
	() => {
	  return this.$route
	},
	() => {
		// do some thing
	}, { immediate: true })
}
destroyed() {
	// 页面销毁时调用监听函数,就可以移除watch
	this.watchRoute()
}

此处插播另外一个知识点keep-alive的组件,不会执行destroyed,并且created函数只会执行一次。
要分别用activated(激活)和deactivated(失活)函数代替。

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值