Vue實現(xiàn)實時監(jiān)聽頁面寬度高度變化

更新時間：2024年03月27日 15:32:51 作者：嫣嫣細語

這篇文章主要為大家詳細介紹了Vue如何實現(xiàn)實時監(jiān)聽頁面寬度高度變化,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下

vue監(jiān)聽頁面寬高

運用的主要技術：watch監(jiān)聽

話不多說直接上代碼，自行研究

 <template>
  <div class="rightContainer">
    <h1>監(jiān)聽頁面寬高</h1>
    <h2>當前整個頁面寬度{{ windowWidth }}px</h2>
    <h2>當前整個頁面高度{{ windowHeight }}px</h2>
  </div>
</template>
<script>
export default {
  name: 'WatchsHW',
  data() {
    return {
      windowHeight: document.body.clientHeight,
      windowWidth: document.body.clientWidth
    }
  },
  watch: {
    // 監(jiān)聽頁面高度
    windowHeight(val) {
      console.log('實時屏幕高度：', val, this.windowHeight)
    },
    // 監(jiān)聽頁面寬度
    windowWidth(val) {
      console.log('實時屏幕寬度：', val, this.windowHeight)
    }
 
  },
 
  mounted() {
    // <!--把window.onresize事件掛在到mounted函數(shù)上-->
    window.onresize = () => {
      return (() => {
        this.windowHeight = document.documentElement.clientHeight // 高
        this.windowWidth = document.documentElement.clientWidth // 寬
      })()
    }
  },
 
  methods: {
 
  }
}
</script>
 
<style lang="scss" scoped>
.rightContainer{
  width: 100%;
  text-align: center;
  overflow: hidden;
}
</style>

知識補充

除了上文的方法，小編還為大家整理了一些Vue實時監(jiān)聽的其他方法，希望對大家有所幫助

Watch

watch的作用可以監(jiān)控一個值的變換，并調(diào)用因為變化需要執(zhí)行的方法?？梢酝ㄟ^watch動態(tài)改變關聯(lián)的狀態(tài)。

簡單點說，就是實時監(jiān)聽某個數(shù)據(jù)的變化。

1、普通監(jiān)聽

<template>
<!-- 監(jiān)聽屬性 -->
  <div>
    <p>{{num}}</p>
    <button @click="num++">按鈕</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      num:30
 
    }
  },
  watch:{
    // 第1種格式:
    // num(newVal,oldVal){
    //   // 什么時候執(zhí)行, num的值發(fā)生變化的時候,就執(zhí)行這里的代碼
    //   console.log("num被修改了",newVal,oldVal);
    // },
    // 第2種格式:
    num:{
      handler(newVal,oldVal){
        // 什么時候執(zhí)行, num的值發(fā)生變化的時候,就執(zhí)行這里的代碼
        console.log("num被修改了",newVal,oldVal);
      }
    }
  }
}
</script>
 
<style lang = "less" scoped>
  
</style>

2、立即監(jiān)聽

如果我們需要在最初綁定值的時候也執(zhí)行函數(shù)，則就需要用到immediate屬性。

<template>
<!-- 立即監(jiān)聽 -->
  <div>
    <p>{{num}}</p>
    <button @click="num++">按鈕</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      num:30
 
    }
  },
  watch:{
    num:{
      handler(newVal,oldVal){
        // 什么時候執(zhí)行, num的值發(fā)生變化的時候,就執(zhí)行這里的代碼
        console.log("num被修改了",newVal,oldVal);
      },
      immediate:true   // 立即監(jiān)聽
    }
  }
}
</script>
 
<style lang = "less" scoped>
  
</style>

immediate需要搭配handler一起使用，其在最初綁定時，調(diào)用的函數(shù)也就是這個handler函數(shù)。

3、深度監(jiān)聽

當需要監(jiān)聽一個對象的改變時，普通的watch方法無法監(jiān)聽到對象內(nèi)部屬性的改變，只有data中的數(shù)據(jù)才能夠監(jiān)聽到變化，此時就需要deep屬性對對象進行深度監(jiān)聽。

<template>
<!-- 深度監(jiān)聽 -->
  <div>
    <p>{{obj.age}}</p>
    <button @click="obj.age++">按鈕</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      obj:{
        name:"Vue",
        age:7
      }
 
    }
  },
  watch:{
    // obj:{
    //   handler(newVal,oldVal){
    //     // 什么時候執(zhí)行, obj中一旦有屬性發(fā)生變化,就會執(zhí)行這里的代碼
    //     console.log("name或者age被修改了",newVal,oldVal);
    //   },
    //   deep:true
    // }

    "obj.age":{
      handler(newVal,oldVal){
        // 什么時候執(zhí)行, age被修改的時候來執(zhí)行
        console.log("age被修改了",newVal,oldVal);
      },
    }
  }
}
</script>
 
<style lang = "less" scoped>
  
</style>

注意：

1、如果監(jiān)聽的數(shù)據(jù)是一個對象，那么 immediate: true失效；

2、一般使用于對引用類型的監(jiān)聽，深度監(jiān)聽，如監(jiān)聽一個Object，只要Object里面的任何一個字段發(fā)生變化都會被監(jiān)聽，但是比較消耗性能，根據(jù)需求使用，能不用則不用。

3、因為上面代碼obj是引用數(shù)據(jù)類型，val, oldVal指向一致，導致看到的結(jié)果一樣。

4、deep優(yōu)化

我們可以通過點語法獲取對象中的屬性，然后轉(zhuǎn)為字符串，即是對深度監(jiān)聽的優(yōu)化

<template>
  <div class="home">
    <h3>{{obj.age}}</h3>
    <button @click="btnClick">按鈕</button>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      obj: {
        name: "Lucy",
        age: 13
      }
    };
  },
  methods: {
    btnClick() {
      this.obj.age = 33;
    }
  },
  watch: {
    // 通過點語法獲取對象中的屬性，然后轉(zhuǎn)為字符串，即是對深度監(jiān)聽的優(yōu)化
    "obj.age": {
      handler(val, oldVal) {
        console.log(val, oldVal);
      },
      deep: true,
      immediate: true,		// 此時監(jiān)聽的數(shù)據(jù)不是一個對象，可以使用immediate
    }
  }
};
</script>

到此這篇關于Vue實現(xiàn)實時監(jiān)聽頁面寬度高度變化的文章就介紹到這了,更多相關Vue實時監(jiān)聽頁面寬高內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: