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

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

1、问题

watch 需要动态生成

2、解决思路

  1. 创建一个全局变量用于存放 watch 列表
  2. 循环生成函数对象
  3. 将函数对象添加到 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、注意

  1. 一定要在 beforeCreate 完成拼接,否则 watch 没有内容
    详细参考VUE官网VUE生命周期钩子
    VUE生命周期
  2. let tkey = key的目的是使用let解除key的引用,如果不使用let tkey而直接使用key的话你就会看到这个样子:
    没有消除key的引用
    而我们使用tkey消除key的引用后,正确的应该是这样
    在这里插入图片描述
Logo

前往低代码交流专区

更多推荐