Vue实现实时监听页面宽度高度变化

 <template>
  <div class="rightContainer">
    <h1>监听页面宽高</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: {
    // 监听页面高度
    windowHeight(val) {
      console.log('实时屏幕高度：', val, this.windowHeight)
    },
    // 监听页面宽度
    windowWidth(val) {
      console.log('实时屏幕宽度：', val, this.windowHeight)
    }
 
  },
 
  mounted() {
    // <!--把window.onresize事件挂在到mounted函数上-->
    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>
 

<template>
<!-- 监听属性 -->
  <div>
    <p>{{num}}</p>
    <button @click="num++">按钮</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      num:30
 
    }
  },
  watch:{
    // 第1种格式:
    // num(newVal,oldVal){
    //   // 什么时候执行, num的值发生变化的时候,就执行这里的代码
    //   console.log("num被修改了",newVal,oldVal);
    // },
    // 第2种格式:
    num:{
      handler(newVal,oldVal){
        // 什么时候执行, num的值发生变化的时候,就执行这里的代码
        console.log("num被修改了",newVal,oldVal);
      }
    }
  }
}
</script>
 
<style lang = "less" scoped>
  
</style>

<template>
<!-- 立即监听 -->
  <div>
    <p>{{num}}</p>
    <button @click="num++">按钮</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      num:30
 
    }
  },
  watch:{
    num:{
      handler(newVal,oldVal){
        // 什么时候执行, num的值发生变化的时候,就执行这里的代码
        console.log("num被修改了",newVal,oldVal);
      },
      immediate:true   // 立即监听
    }
  }
}
</script>
 
<style lang = "less" scoped>
  
</style>

<template>
<!-- 深度监听 -->
  <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){
    //     // 什么时候执行, obj中一旦有属性发生变化,就会执行这里的代码
    //     console.log("name或者age被修改了",newVal,oldVal);
    //   },
    //   deep:true
    // }

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

<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: {
    // 通过点语法获取对象中的属性，然后转为字符串，即是对深度监听的优化
    "obj.age": {
      handler(val, oldVal) {
        console.log(val, oldVal);
      },
      deep: true,
      immediate: true,		// 此时监听的数据不是一个对象，可以使用immediate
    }
  }
};
</script>