子组件监听props中的值，监听不到旧值的相关问题

昨天，在项目中做一个功能，一个tab切换，点击其中一个tab的时候，调用组件中的查询方法，切只调用一次。再次切换的时候不再调用。

我的做法是：

在父组件中创建一个变量，初始化data中设为0，在点击tab的时候设为1。将变量传给子组件，在并且在子组件中监听这个变量，然后执行查询方法。

但是，我遇到了一个问题，就是在子组件中只能监听到新的值，监听不到旧的值，代码如下：

父组件：

<template>
    <div>
    <div v-if="100 == whitchOne">
        <packageitems :packagedata="packageData" :number1="number1"></packageitems>
    </div>
    </div>
</template>
import packageItems from "@/views/cart/components/newAssets/packageItems";
export default{
  data(){
    return{
       number1:'0'
    }
  },
  methods:{
    showOwn(idx) {
    if (idx == 100) {
        this.number1 == 1 ? '' : this.number1 = 1;
    }
    }
  }
}

子组件：

watch: {
    // 点击新增资产搜索
    number1: {
        handler: function(val, oldval) {
            console.log("val:" + val, "oldval:" + oldval);
            if (val == '0') {
                return false;
        }
        this.getPackages((this.keywords = this.formData.addAsset.packName), (this.prodNbrs = ""));
    },
    immediate: true,
    deep: true
},

每次打印出来的值就是

val: 1 oldval: undefined

找了许久，都没有找到原因是什么，后来才发现原因不在于watch，而在于父组件中的v-if，不应该用v-if，而是应该用v-show

那么下面我们来说一下v-if和v-show的区别：

• v-if：根据后面数据的真假，从DOM树上直接删除或重建DOM节点；如果初始条件为假，          则什么也不做；只有在条件第一次变为真时才开始局部编译。
• v-show：只是修改diaplay的属性的显示和隐藏，元素始终在DOM树上；在任何条件下                  （首次条件是否为真）都被编译，然后被缓存，而且DOM元素始终被保留

在我所做的功能中显示隐藏组件用的是v-if，所以组件在初始化的时候是number1是没有被编译的，而且每次切换到该组件的时候都是重新编译，这样旧值就一直都是undefined。而v-show则不同，它初始化的时候就被创建了，切换就是显示和隐藏，不存在没有被编译找不到元素的情况。所以在这种会频繁切换的功能中要用v-show。