Vue实现实时监听页面宽度高度变化
作者：嫣嫣细语
这篇文章主要为大家详细介绍了Vue如何实现实时监听页面宽度高度变化,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
vue监听页面宽高
运用的主要技术：watch监听
话不多说直接上代码，自行研究
<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>
知识补充
除了上文的方法，小编还为大家整理了一些Vue实时监听的其他方法，希望对大家有所帮助
Watch
watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。
简单点说，就是实时监听某个数据的变化。
1、普通监听
<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>2、立即监听
如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。
<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>immediate需要搭配handler一起使用，其在最初绑定时，调用的函数也就是这个handler函数。
3、深度监听
当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。
<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>注意：
1、如果监听的数据是一个对象，那么 immediate: true失效；
2、一般使用于对引用类型的监听，深度监听，如监听一个Object，只要Object里面的任何一个字段发生变化都会被监听，但是比较消耗性能，根据需求使用，能不用则不用。
3、因为上面代码obj是引用数据类型，val, oldVal指向一致，导致看到的结果一样。
4、deep优化
我们可以通过点语法获取对象中的属性，然后转为字符串，即是对深度监听的优化
<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>到此这篇关于Vue实现实时监听页面宽度高度变化的文章就介绍到这了,更多相关Vue实时监听页面宽高内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！