背景

最近在实现一个功能的时候发现，在一个vue页面中组件的部分一直不能展示，看了看代码，展示条件也符合啊，为何展示不出来呢？在仔细看了下逻辑，发现组件只有在接收props中的值发生改变的时候，才会执行下面的逻辑，才会展示内容。

代码

// 父页面
<div class="nav">
   <div class="nav-item" 
	   :class="{'active':type=='scatter'}" 
	   @click="onTabClick('scatter')"
   >
  		短暂
  </div>
  <div 
  	class="nav-item" 
  	:class="{'active':type=='bid'}"
  	@click="onTabClick('bid')"
  >
  		长期
  </div>
</div>
  <div class="content">
    <scatter
	    v-show="type=='scatter'" 
	    :city="cityLocation"
    ></scatter>
    <bid 
    	v-show="type=='bid'">
    </bid>
</div>

data () {
    return {
      type: 'scatter',
      cityLocation: null,
    }
  },

// 子组件
props: {
   city: {
     type: Object
   }
 },
watch: {
   cityLocation (city) {
     this.getData(city.key)
   },
   city (city) {
     this.cityLocation = city
   }
 },

此时我打印watch监听的city发现并没有值，但是父组件的cityLocation已经赋值了。

解决办法

深度监听

watch: {
  city: {
    handler(city) {
      this.cityLocation = city;
    },
    // 代表在wacth立即先去执行handler方法
    immediate: true
  }
}

额外

看了一些文章了解到，watch还有一个deep属性，默认值是false，代表是否深度监听。比如要监听的是一个对象，受现代JavaScript的限制，vue不能检测到对象属性的添加或删除。由于vue会在初始化实例时对属性执行getter/setter转化过程，所以属性必须在data对象上存在才能让vue转换它，这样才能让它响应。默认情况下 handler 只监听obj这个属性它的引用的变化，我们只有给obj赋值的时候它才会监听到，比如我们在 mounted事件钩子函数中对obj进行重新赋值。这样我们的 handler 才会执行。
相反，如果我们需要监听obj里的属性的值呢？这时候deep属性就派上用场了！deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。