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) {
        // 逻辑
    } 
  }
}
复制代码