VUE动态生成 watch 侦听器

最近有需求对筛选器中指定参数做参数联动，需要侦听指定参数变化，因为参数联动关系是用户指定的，那么 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生命周期钩子
   
2. let tkey = key的目的是使用let解除key的引用，如果不使用let tkey而直接使用key的话你就会看到这个样子：
   
   而我们使用tkey消除key的引用后，正确的应该是这样