子組件監聽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。