在VUE監聽視窗中如何解決變化事件的問題

下面我就為大家分享一篇淺談VUE監聽窗口變化事件的問題，具有很好的參考價值，希望對大家有所幫助。

Vuejs 本身就是一個 MVVM 的框架。但在監聽 window 上的 事件 時，往往會顯得 力不從心。

例如 這次是 window.resize恩，我做之前也是百度了一下。看到大傢伙都為這個問題煩惱。

問題： 今天我也遇到了這樣一個問題， 是關於canvas 自適應。根據視窗的變化去變化canvas 的寬度備註： 重要的問題說三遍解決框架內的bug 先說框架版本版本版本（這裡用的Vue 2.x 、ES6）

解決方案：

第一步：先在data 中去定義一個記錄寬度是屬性

data: { 
 screenWidth: document.body.clientWidth // 这里是给到了一个默认值 （这个很重要）
  }

第二步： 我們需要講reisze 事件在vue mounted 的時候去掛載一下它的方法

mounted () { 
    const that = this window.onresize = function() { 
    return function(){ 
      window.screenWidth = document.body.clientWidth;
      that.screenWidth = window.screenWidth
      })()
     } 
    }

第三個步驟： watch 去監聽這個屬性值的變化，如果發生變化則講這個val 傳遞給this.screenWidth

watch: { 
   screenWidth (val) { 
      this.screenWidth = val
      } 
    }

第四步：優化因為頻繁觸發resize 函數，導致頁面很卡的問題

watch: { 
   screenWidth (val) { 
     if (!this.timer) { 
       this.screenWidth = val 
       this.timer = true 
        let that = this 
   setTimeout(function () { 
        // that.screenWidth = that.$store.state.canvasWidth 
  console.log(that.screenWidth) 
        that.init() 
        that.timer = false 
       }, 400) 
      } 
     } 
   }

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

vue實作tab切換外加樣式切換方法

javaScript"=="和"==="的差異詳解

node.js部落格專案開發手記

#

以上是在VUE監聽視窗中如何解決變化事件的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！