關于父元件給子元件傳值後再初始化子元件

問題描述：

新增和修改共用同一個頁面，是以需要再初始化的時候判斷是哪種形式，若為修改則需要回顯資訊。

解決思路一：

本來想使用watch監聽，當父元件A傳過來的值發生變化的時候執行子元件B的初始化方法。但是當新增的時候B的初始化方法不會觸發，于是給他增加了immediate屬性（初次綁定執行）。

watch: {
    index: {
      handler(val) {
        if (val >= 0) {
          this.init(val)
        } else {
          this.init()
        }
      },
      immediate: true
    }
  }
           

對于新增和修改的差別較為簡單，僅在初始化方法init中添加了一個if（沒有寫成兩個方法）。

但該方法不出意外的變成了一個bug。。

當修改的時候init()執行了兩遍。因為初次綁定index的時候執行了一遍init和index接收到A傳過來的值的時候又執行了一遍init。

解決思路二：

使用watch監聽失敗，但是新增的時候總是要執行init方法，是以将init()放在mounted中。但是由于父子元件加載的順序問題：

父beforeCreated ->父created ->父beforeMounted ->子beforeCreated ->子created ->子beforeMounted ->子mounted -> 父mounted

 修改的時候，A中更改index的值再傳到B中的時候，B的mounted已經執行完畢，init方法相當于使用了新增的條件進行初始化。

後來使用nextTick方法，擷取更新後的DOM。

mounted() {
    this.$nextTick(() => {
      this.init()
    })
  }
           

問題解決。

但是總感覺怪怪的。。各位大佬有沒有發現問題或者有更好的方法，歡迎各位指教