vue2.x中单选框单击事件延迟问题

前一阵子发现@click存在延迟问题，今天又碰到了发现又没有，所以仔细对比了一下。

由于项目中单选框的样式是由label实现的，真实的input隐藏起来了：

<template v-for="(item, i) in dimensions" >
	<label class="checkbox-inline" :for="'dimension_'+i" @click="toggleDimensions()"> {{item.name}}</label>
	<input style="visibility:hidden;" type="radio" :id="'dimension_'+i"  name="dimension" :value="item.key" v-model="params.dimension" />
</template>
<script>
// JS部分
{
	watch: {
		'params.dimension'(newVal) {
			console.log(newVal);
		}
	},
	methods: {
		toggleDimensions() {
			console.log(this.params.dimension)
		}
	}
}
</script>

最后发现watch监听获取的是实时正确的，但是@click获取的有延迟，必须手动延时100-200毫秒左右才能获取到正确的值。

今天才发现其实是因为把@click写在了label上面，如果写在input上面就没有问题：

<template v-for="(item, i) in dimensions" >
	<label class="checkbox-inline" :for="'dimension_'+i"> {{item.name}}</label>
	<input style="visibility:hidden;" type="radio" :id="'dimension_'+i"  name="dimension" :value="item.key" v-model="params.dimension"  @click="toggleDimensions()"/>
</template>

另外，如果是直接用label包裹input的方式<label><input type="radio"/></label>,@click只能写在input上面，因为写在label上面会触发2次单击事件（暂不清楚为何）。

最后，总之，@click写在input上永远是正确的。

20171128更新

今天又碰到这个问题，发现<label><input type="checkbox" @click="toggleDimensions"/></label>也存在延迟问题，，不知道是不是checkbox和radio的区别，有待进一步验证。

对象的刷新问题

看如下例子，如果直接给this.page_list整体赋值，则DOM会刷新，如果只是this.page_list[i] = xxx;这样赋值，则不会刷新，之前一直没有发现，是因为页面还有其它地方修改了data导致DOM刷新，例如如果我把下面的this.query();给放开那么this.page_list[i] = xxx;这样赋值也是可以的（由于query可能在initSelect之前执行，也有可能之后，所以有时候下拉框会出来，有时候又出不来）。

<select v-model="params.page_one_code" class="form-control">
	<option value="">--请选择--</option>
	<option :value="item.page_code" v-for="item in page_list">{{item.page_name}}</option>
</select>
<script>
// 仅展示部分代码
	export default {
		data: function()
		{
			return {
				query_page_list_url: 'chart_config/chart_page_list_query.json',
				page_list: {},
			};
		},
		mounted: function()
		{
			this.initSelect();
			//this.query();
		},
		methods:
		{
			/**
			 * J初始化下拉框
			 */
			initSelect: function()
			{
				this.$ajax.postJson(this.query_page_list_url, {}).then((resp) =>
				{
					console.log(resp);
					var list = resp.result_rows;

					// 写法一：
					list.forEach(page => {
						this.page_list[page.page_code] = page;
					});

					// 写法二：
					var page_list = {};
					list.forEach(page => {
						page_list[page.page_code] = page;
					});
					this.page_list = page_list;
				});
			},
		}
	}
</script>

组件内的变量共享问题

例如，假设我有一个日期组件，同一个页面可能会有多个实例，今天无意中发现直接放在script里面的变量在不同的组件实例中是共享的：

假设代码如下：

<template>
	xxx
</template>
<script>
	let closeId = null;
	export default {
		data(): {

		}
	};
</script>

比如我在左边组件中将closeId修改为1，结果右边组件也变成了1，只有把它放到data里面才不会共享：

<template>
	xxx
</template>
<script>
	export default {
		data(): {
			closeId: null
		}
	};
</script>