vue如何做到只刷新当前组件不刷新整个页面

1.前言

我们有时候会有这种需求(比较少)，在项目种v-for应该是用的比较多的，如果数据改变了，页面会自动更新，因为设置了key，所以和上一次数据相同的不会刷新，只刷新改变了的数据，但是有些时候会需要每次数据改变之后都需要数据全部更新，你可以会想到直接让页面直接刷新呗，这样是可以，但是页面会闪一下，体现不好， 我项目中正好就有这样的需要求，因为v-for的是多个iframe,每个iframe都是个单独的页面，每个页面都是海康的一个摄像机，到每次导航切换的时候都需要重新reload iframe 来保证每个摄像头都重新加载，因为会存在这样的情况，当有个场景是显示所有摄像头，另外个场景是其中几个摄像头，当这个场景切换到所有场景就会有相同的数据（不重新加载iframe），为了保证所有的iframe重新加载，所以v-for每次都需要重新加载数据。

2.思路

主要思路是用到v-if,因为v-if在初始渲染时条件为假，则什么也不做—直到条件第一次变为真时，才会开始渲染条件块。如果多次切换每次都会重新渲染（开销比较大），一般这种情况都会用v-show，但是为了需求没办法（不过海康的rtsp流控件也有问题，必须一个一个加载，如果4个设备，必须先加载第一个，然后加载第二个，同时加载必须要给延时，这个延时没把握好也会导致某个视频播放不了），但是项目中也不会频繁切换！

<div
   class="videoContainer"
   v-if="monitorVos.length && !showFullScreen && isReload"
 >   
<iframe	
 src="./static/canvasPlugin.html"
 frameborder="0"
 ref="iframe"
 class="iframe"
 scrolling="no"
></iframe>
</div>

   //让monitorVos设备列表重新加载
methods: {
    async reload() {
      this.isReload = false;
      await new Promise(resolve => {
        this.$nextTick(() => {
          resolve();
          this.isReload = true;
        });
      });
    },
	 async filterMonitorVos(value) {
	    //切换tab时 隐藏大的预览界面
	    this.showFullScreen = false;
	    this.toolShow = false;
	    //展示被选中的类型的摄像头列表
	    this.monitorVos = this.oldMonitorVos; //让全部的摄像头数据进行检索
	    if (value == "all") {
	      await this.reload();
	      this.initCameraData(this);
	      return;
	    }
	
	    let newList = [];
	    this.monitorVos.forEach((e, index) => {
	      if (value == e.monitorType) {
	        newList.push(e);
	      }
	    });
	    this.monitorVos = newList;
	    await this.reload();
	    this.initCameraData(this);
	  }
	}
  watch: {
    //监听从获取父组件传来的值
    cameraType: async function(newVal) {
      await this.filterMonitorVos(newVal);
    }
  },

这里只列了核心代码,下面展示下项目效果！