一、在Vue單個頁面運用

<template>
    <div id="divId">

    </div>
</template>
<script>

    export default {
        data() {
            return {
                screenWidth: document.documentElement.clientWidth,//螢幕寬度
                screenHeight: document.documentElement.clientHeight,//螢幕高度
 

            }
        },
        watch:{
            'screenWidth':function(val){ //監聽螢幕寬度變化
                var oIframe = document.getElementById(divId);
                oIframe.style.width = (Number(val)-120) + 'px'; //'120'是頁面佈局調整，可去除

            },
            'screenHeight':function(){ //監聽螢幕高度變化
                var
 
 oIframe = document.getElementById(divId);
                oIframe.style.height = (Number(val)-120) + 'px'; //'120'是頁面佈局調整，可去除
            }
        },
        mounted() {
            var _this = this;
            window.onresize = function(){ // 定義視窗大小變更通知事件
                _this.screenWidth = document.documentElement.clientWidth; //視窗寬度
 

                _this.screenHeight = document.documentElement.clientHeight; //視窗高度
            };
        }
    }
</script>

二、在專案中全域性運用

1、在store.js裡定義

let state = {
    screenWidth:document.documentElement.clientWidth, //螢幕寬度
    screenHeight:document.documentElement.clientHeight, //螢幕高度
}

2、在main.vue裡掛載window.onresize

mounted() {
  var _this = this;
  window.onresize = function(){ // 定義視窗大小變更通知事件
    _this.$store.state.screenWidth = document.documentElement.clientWidth; //視窗寬度
    _this.$store.state.screenHeight = document.documentElement.clientHeight; //視窗高度
  };
}

3、在Vue頁面中監聽

<template>
    <div id="divId">

    </div>
</template>
<script>

    export default {
        data() {
            return {
                screenWidth: document.documentElement.clientWidth,//螢幕寬度
                screenHeight: document.documentElement.clientHeight,//螢幕高度
            }
        },
        watch:{
            '$store.state.screenWidth':function(val){ //監聽螢幕寬度變化
                var oIframe = document.getElementById(divId);
                oIframe.style.width = (Number(val)-120) + 'px'; //'120'是頁面佈局調整，可去除

            },
            '$store.state.screenHeight':function(){ //監聽螢幕高度變化
                var oIframe = document.getElementById(divId);
                oIframe.style.height = (Number(val)-120) + 'px'; //'120'是頁面佈局調整，可去除
            }
        }
    }
</script>

注意事項

1、在專案中 window.onresize只能掛載一次，在多個頁面中同時掛載 window.onresize時，只有其中一個 window.onresize會起作用
2、避免 window.onresize頻繁掛載（待續）