VUE动态生成 watch 侦听器

最新推荐文章于 2025-06-26 14:06:04 发布

原创最新推荐文章于 2025-06-26 14:06:04 发布 · 8.8k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#VUE #watch

VUE 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Vue.js中动态生成watch监听器，以实现参数联动。通过创建全局变量存放watch列表，利用循环生成函数对象并添加到watch列表，实现在beforeCreate钩子中动态监听指定参数的变化。

最近有需求对筛选器中指定参数做参数联动，需要侦听指定参数变化，因为参数联动关系是用户指定的，那么 VUE 的 watch 就不能写死了，得根据某个数据列表生成。

于是就有了这篇文章的产生。

1、问题

watch 需要动态生成

2、解决思路

创建一个全局变量用于存放 watch 列表
循环生成函数对象
将函数对象添加到 watch 列表

3、直接上代码

// 参数
var params = ["Param1":"hello", "Param2":[1,2,3], "Param3":{"text":"DMLK"}];
// 需要开启监听的列表
var linkparam = ["Param1", "Param3"]
// 创建一个全局变量用于存放 watch 列表
var linkWatch = {};

var app = new Vue({
	el: '#app',
	data: params,
	beforeCreate() {
	// ParamLink
		if(linkparam.length > 0){
		  	for(var key in linkparam){
		  		// 解除key的引用
		  		let tkey = key
		    	linkWatch[tKey] = function(newVal, oldVal){
					...  // 这里写侦听处理代码，tKey就是参数名称
		    	};
		  	}
		}
	},
	watch: linkWatch,
	... 
});

4、注意

一定要在 beforeCreate 完成拼接，否则 watch 没有内容
详细参考VUE官网VUE生命周期钩子
let tkey = key的目的是使用let解除key的引用，如果不使用let tkey而直接使用key的话你就会看到这个样子：

而我们使用tkey消除key的引用后，正确的应该是这样