Vue.js技術棧 容易出錯的地方

一、computed、props中的vuex值在data中不更新

computed: {
  ...mapGetters([
    'intepriv'
  ])
},

data() {
  const query = this.$route.query
    return {
      isIntepriv: this.intepriv
    }
}
複製代碼

假設intepriv的初始值爲false，此處的isIntepriv永遠爲false. props中的值用computed便可動態更新

二、組件複用

有時候咱們的組件須要複用，而且咱們但願組建從新渲染，此時咱們須要加key

<bill key="a"></bill>
<bill key="b"></bill>
複製代碼

三、同時監聽多個值的變化

例：這裏咱們監聽tableData和appOpts的變化，而且當2個值都有數據再去執行邏輯

// 監聽app有值而且table有數據
computed: {
  tableInfo() {
    return {
      tableData: this.tableData,
      appOpts: this.$store.getters.appOpts
    }
  }
},
watch: {
  tableInfo(o) {
    if (o.appOpts.length && o.tableData.length) {
        // 邏輯
    } 
  }
}
複製代碼