今天在實作一個功能時又學到了一點小知識，就如我標題寫的這樣，這也是我今日遇到的問題。

昨天我得知了一個新的需求，需要在目前開發的網站上增加一個發出音效的功能。

那這個音效會在兩種狀況下觸發。

• 第一個是主動點選後發生
• 第二個則是SOCKET接進來的資料改變後發生

第一個狀況下沒甚麼問題，很容易處理，

所以原先我認為只要將一樣的程式碼從主動點擊的那邊放到 Watch 之中就好了。

就像下面這樣 ⬇️

watch: {
  score: function (newValue, oldValue) {
    if (this.$store.state.live.soundEffectSwitch === true) {
			let soundPlay = document.querySelector("#soundEffect")
			soundPlay.play()
		}
  }
}

結果當然就是報錯啦，查了一下後才知道原來 Watch 階段 DOM 元素還沒有渲染好，

自然而然的就取得不到元素而報錯誤了。

那因為我們變動的資料會是在DOM掛載好才有可能發生改變，

所以我就將取得元素即播放的部分寫成另一個 Methods，

經過測試後也是可以正常執行了，順利解決這個問題。⬇️

methods: {
    soundEffectPlay() {
      let soundPlay = document.querySelector("#soundEffect")
      soundPlay.play()
    }
},
watch: {
  score: function (newValue, oldValue) {
    if (this.$store.state.live.soundEffectSwitch === true) {
			this.soundEffectPlay()
		}
  }
}

也順便將主動觸發的那部分統一改成觸發 soundEffectPlay 這個 Function 。