Vue 多層次變數監聽範例

情境
1.資料的來源為tableStr(輸入字串)
2.由tableStr,計算產生tables(桌次array)
3.由tables 計算產生tableMap(桌次對照表)

1.data 內只建立需要用的變數,不設定預設起始值

data{
  tableStr:"", //桌號字串 
  tableMap:{}, //桌次對照表
}

2.在mounted後才給預設值,才會讓相關的變數都被計算

mounted(){
  this.tableStr = "1-5" 
}

3.tables是計算產生的,在tableStr有值 就會被產生

computed{
  tables:function(){
    let tables = this.tableStr.split(",")
    return tables
  }
}

4.watch是需要有異動才會被觸發的

//所以在mounted內去設定tablStr值,造成異動,才會造成tables被重新計算
//這個watch才會被觸發,才會在這裡去改變要產生的tableMap值
watch:{
  tables:function(val){
    tableMap = {}
    for(let i=0;i<this.tables.length;i++){
      tableMap[`table_${this.tables[i]}`] = i+1
    }
    this.tableMap = tableMap
  }
}

測試結果
computed的值是可以被watch的,但watch一定要是有異動才會被觸發
所以要設定初始值,並要讓連動的相關變數都被計算
初始值要放在mounted內去設定,不要在data內去直接指定