應用場景

在vue中父子組件是通過props傳遞數據的。通常有以下幾種場景：

• 子組件展示父組件傳遞過來的props，一般是字符串
• 子組件通過父組件的props計算得到某個值
• 子組件修改父組件傳遞過來的props

computed 計算屬性

使用場景：當pros傳遞過來的值不能直接使用的時候，就可以使用計算屬性了。
比如：完整的地址需要將省市區(qū)3個字段拼接后展示。

計算屬性是基于依賴進行緩存的，當props不變時，多次訪問addrese計算屬性，會立即返回結果，而不必再次執(zhí)行計算。

props: {
  province: String, // 省
  city: String, // 市
  area: String // 區(qū)
},
computed: {
  address(){
    return `${this.province}${this.city}${this.area}`
  }
}

methods 方法

上面計算屬性，通過methods也可以實現，但methods不會進行緩存，而且methods通常用來處理業(yè)務邏輯。

watch 偵聽器

使用場景：將傳遞過來的props作為初始值，比如城市選擇列表的默認城市，我們希望選擇城市時，改變這個值。

單向數據流

父級 prop 的更新會向下流動到子組件中。

當我們需要在子組件中修改父組件傳遞過來的props時，如果直接更改，vue會報錯的，因為如果子組件直接更改父組件的props，會使應用的數據流向難以理解。

解決方案

為了不直接修改props的值，可以在data中，用props初始化一個data屬性，以后更改這個data屬性即可。

但是這會導致，父組件變化時，該data屬性不會更新(注意：只針對基本類型，如果是引用類型，仍舊是變化的。)

此時為了更新這個data屬性，就需要使用偵聽器來監(jiān)聽props的變化。

深度監(jiān)聽

使用場景：當監(jiān)聽到某個值變化后，執(zhí)行異步請求。
此時computed和methods都不太合適。

• 基本類型

watch: {
   msg(newV,oldV) {
     // do something
     console.log(newV,oldV)
   } 
}

• 引用類型
  1. 計算屬性(推薦)
     先通過計算屬性得到引用類型的內部某個字段，再使用偵聽器監(jiān)聽該字段的變化

  computed: {
      isShow() { 
          return this.config.role.isShow
      }
  },
  watch: {
      isShow(newV,oldV) {
          // do something
          console.log(newV,oldV)
      }
  }
  

  2. deep

   watch: {
    isShow:{ //深度監(jiān)聽，可監(jiān)聽到對象、數組的變化
        handler (newV, oldV) {
          // do something, 可使用this
          console.log(newV,oldV)
        },
        deep:true
       }
  },
  

總結

• props和data的選擇
• data的更新
• 單向數據流
• 為什么不用methods

參考

vue文檔：計算屬性和偵聽器
小火柴的藍色理想：Vue組件選項props