业务场景：高拍仪给出的视频信息API回调里会不断返回图像数据。因为有主副摄像图像信息，并且两个图像信息会二选一展示在DOM容器里。所以就是二对一的关系。
// 主摄像数据
let priPic:string = '';
// 副摄像数据
let subPic:string = '';
// 展示在容器的数据 = 主摄像数据||副摄像数据;
let showPic:string = '';
// 镜头
let lens:'主' | '副'= '主';
我的思路是，通过监听lens指定镜头的状态后，将选择的镜头数据不断进行赋值操作给showPic。
这就意味着，主摄像和副摄像的数据我只要监听一条就可以实现了，多出来的监听就是冗余代码。
所以我想到了 动态制定监听对象的方法，并作了实现，下面是核心代码：
<script>
watcher() {
// 如过有监听，就注销
if (this.unwatch) this.unwatch();
// 没有制定监听的变量名，直接return
if (!this.choosewatch) return;
//vm.$watch 返回一个取消观察函数，用来停止触发回调：
this.unwatch = this.$watch(this.choosewatch, (val) => {
//TODO Someting:callback
this.watchdata = `${this.choosewatch}: ${val}`;
});
}
</script>
相关实现方法参考vm-watch
完整案例
<template>
<div id="app">
<label for="pet-select">Choose a watch:</label>
<select v-model="choosewatch" name="pets" id="pet-select">
<option value="">--Please choose an option--</option>
<option v-for="watch in watchList" :value="watch" :key="watch">{{ watch }}</option>
</select>
<p>
监听watch1
<input type="text" v-model="watch1" />
<button
@click="
() => {
watch1 = '';
}
"
>
清空
</button>
</p>
<p>
监听watch2
<input type="text" v-model="watch2" />
<button
@click="
() => {
watch2 = '';
}
"
>
清空
</button>
</p>
<p>{{ watchdata || 'watch:暂无数据' }}</p>
<p>{{ choosewatchdata || 'choosewatch:暂无选择' }}</p>
</div>
</template>
<script>
export default {
data() {
return {
// 选择监听的属性
choosewatch: '',
// 监听的属性
watch1: '',
watch2: '',
watchList: ['watch1', 'watch2'],
// 监听的属性值
watchdata: '',
// 选择监听的属性值
choosewatchdata: ''
};
},
methods: {
watcher() {
if (this.unwatch) this.unwatch();
if (!this.choosewatch) return;
this.unwatch = this.$watch(this.choosewatch, (val) => {
this.watchdata = `${this.choosewatch}: ${val}`;
});
}
},
watch: {
choosewatch(val) {
this.choosewatchdata = `choosewatch: ${val}`;
this.watcher();
}
}
};
</script>