Vue,js 监听window窗口尺寸变化

这篇具有很好参考价值的文章主要介绍了Vue,js 监听window窗口尺寸变化。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.监听window窗口变化

VueJs 监听 window.resize 方法,同时窗口拉伸时会频繁触发resize函数,导致页面性能 卡顿 ,可以搭配setTimeout来提升性能

data() {
    return {
       screenWidth: document.body.clientWidth,//初始化宽度
    }
},

在mounted中挂载resize方法

var _this = this
window.onresize = () => {
        return (() => {
            _this .screenWidth = document.body.clientWidth
        })()
      }

watch 监听 data中或props传递的数据文章来源地址https://www.toymoban.com/news/detail-503672.html

screenWidth(){
        if (!this.timer) {
            this.timer = true
            let _this= this
            setTimeout(function () {
              ... (执行的语句)
              _this.timer = false
            }, 500)
        }
      }

到了这里,关于Vue,js 监听window窗口尺寸变化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue watch监听数据变化

    监听数据变化,在Vue中是通过侦听器来实现的,你也可以将它理解为监听器,时刻监听某个数据的变化 这一次我们要添加的是watch属性。下面我们先来眼熟一下侦听器的添加位置: 侦听器更多的是用在异步操作中,所谓异步操作就是数据返回有所延迟的操作,比如说我们要请

    2024年02月12日
    浏览(35)
  • vue3监听路由的变化

    可以使用监听 router.currentRoute.value 的值,,来监听路由的变化。 引入: setup使用 : 控制台输出的值 newValue : 如果我们只需要监听当前路由 name 的变化,就可以这么监听 router.currentRoute.value.name immediate:true //true 就表示会立即执行。(watch默认绑定,页面首次加载时,是不会执行

    2024年02月12日
    浏览(34)
  • Vue3组件不发生变化,如何监听pinia中数据变化?

    在开发过程中,我们需要将一些跨组件使用的的数据在pinia中进行状态管理,组件在初始化的时候我们能通过onMounted,computed,watch,watchEffect获取到存储在pinia state中的内容,有一些特殊情况,在组件初始化之后我们无法通过以上四种情况获取state中的内容,这时候我们怎么做呢?

    2024年02月11日
    浏览(41)
  • vue2 如何监听数组的变化

    在Vue 2中,底层是通过重写数组的原型方法来实现对数组变化的监听。具体来说,Vue 2使用了一个名为Observer的类来劫持数组的原型方法,使其在调用这些方法时能够触发相应的变化通知。 当Vue 2初始化一个响应式对象时,如果对象是一个数组,Vue会将数组的原型指向一个经过

    2024年02月12日
    浏览(37)
  • vue3 监听props 的变化

    再三说明 仅仅个人学习用,不误导别人 我觉得props 会创建对应的属性,去接受这些值,比如传递一个ref的基本值 age props.age = age.value 传递一个ref的引用值 person props.person= person.value 传递一个reactive的引用值 person props.person= person 最开始时候,props指向了一个响应式的reactive pe

    2024年02月11日
    浏览(28)
  • Vue2 、vue3 监听对象的变化

    vue响应式也叫作数据双向绑定 MVVM模型 (Model-Viem-ViewModel) DOM listeners:实现了页面与数据的绑定,当页面操作数据的时候 DOM 和 Model 也会发生相应的变化 Data Bindings:  实现了数据与页面的绑定,当数据发生变化的时候会自动渲染页面 2.1  实现原理 vue实现数据响应式,是通过

    2024年02月04日
    浏览(36)
  • Vue组件使用(父组件监听子组件数据变化,子组件使用父组件的数据,并监听父组件的数据变化)

    父组件声明变量 父组件向子组件传递数据 Vue 数据类型 type 有以下几种: String:字符串类型。例如:“hello world”。 Number:数字类型。例如:12,1.5。 Boolean:布尔类型。例如:true,false。 Object:对象类型。例如:{name: ‘Tom’, age: 20}。 Array:数组类型。例如:[1, 2, 3]。 Fun

    2024年02月14日
    浏览(28)
  • Vue3优雅地监听localStorage变化

    目录 💡前言  💡 为什么要这样做? 💎 思路 💎 实现 🚗 实现中介者模式 🚗 重写localStorage 🚗 实现useStorage hook 💎 测试 🚗 使用localStorage 🚗 监听localStorage变化 🚗 结果         最近在研究框架,也仔细用了Vue3一些功能,今天分享一次我的实践:         原生的

    2024年02月08日
    浏览(39)
  • vue如何实现实时监听页面宽度高度变化

    运用的主要技术:watch监听 话不多说直接上代码,自行研究

    2024年02月11日
    浏览(35)
  • Vue中监听路由参数变化的几种方式

    目录 一. 路由监听方式: 通过 watch 进行监听 1. 监听路由从哪儿来到哪儿去 2. 监听路由变化获取新老路由信息 3.  监听路由变化触发方法 4. 监听路由的 path 变化 5. 监听路由的 path 变化, 使用handler函数 6. 监听路由的 path 变化,触发methods里的方法  二. 路由监听方式:key是用

    2024年02月14日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包