Vue要多次使用window.onload ,但出现第一次执行被第二次执行覆盖时

最新推荐文章于 2024-08-15 11:39:27 发布

qq_42573597

最新推荐文章于 2024-08-15 11:39:27 发布

阅读量3.9k

点赞数 2

分类专栏：学习文章标签： java

本文链接：https://blog.csdn.net/qq_42573597/article/details/118357370

版权

学习专栏收录该内容

29 篇文章 0 订阅

订阅专栏

vue 中替换 window.onload

问题
当要多次使用window.onload ,但出现第一次执行被第二次执行覆盖时

解决方法
可以使用Vue中

mounted（）{
this.$nextTick(() =>{
        TagClound()
      })
}

进行替换

this.$nextTick(() =>{}) 在dom完全渲染后才开始执行方法，与window.onload类似

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_42573597

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

使用vue二次开发海康监控H5视频播放

Kepler_明的博客

06-09

6980

使用vue二次开发海康监控H5视频播放西瓜播放器示例demo阿里云的示例demo使用海康的H5视频开发包，海康的api页面中的使用第一步第二步第三步第四步切记bug 由于公司项目需要做监控的直播跟回放，所以接触到了这个海康的监控视频播放，本来是打算使用videojs使用rtmp流进行监控的直播，因为现在主流浏览器都不支持flash插件，而videojs使用rtmp流直播的话需要浏览器支持flash，所以果断放弃，后来决定使用hls协议调用H5播放器进行播放。然后当时找了两个H5播放器一个是西瓜播放器，另一个

【Vue知识点- No5.】生命周期、axios、购物车案例

qq_48687155的博客

07-23

558

生命周期、axios、购物车案例

参与评论您还未登录，请先登录后发表或查看评论

Vue-vue中的window.onload=＞nextTick

qq_56973906的博客

09-05

4185

都应该考虑是否是因为本需要在dom执行完再执行，然而实际却在dom没有执行完就执行了代码，如果是就考虑使用将逻辑放到nextTick中，有的时候业务操作复杂，有些操作可能需要更晚一些执行，放在nextTick中仍然没有达到预期效果，这个时候可以考虑使用setTimeout，将逻辑放到宏任务中。{Object} [context]：回调函数执行的上下文环境，不传默认是自动绑定到调用它的实例上。{Function} [callback]：回调函数，不传时提供promise调用。

window.onload用法

acess520的博客

04-14

1108

window.onload用法: 网页中的javascript脚本代码往往需要在文档加载完成过后才能去去执行，否则可能会导致无法获取对象的情况，为了避免这样的情况发生我们可以采用2种方式： 1,、将脚本代码放在网页底端，这样运行代码的时候，因为是从上往下运行的，所有可以确保操作对象已经加载完成。 2、通过window.onload来执行脚本代码。第1种方式需要将代码放在合适的位置，

window.onload、$(document).ready()、Vue.created() 页面加载完成后执行方法

最新发布

pan_junbiao的博客

08-15

501

JQuery 框架的$(document).ready() 方法和window.onload 方法有相似的功能，但是在执行时机方面时有区别的。window.onload 方法是在页面中所有元素（包括元素的所有关联文件）完全加载到浏览器后才执行，即 JavaScript 此时才可以访问页面中的任何元素。而通过 JQuery 中的$(document).ready() 方法注册的事件处理程序，在 DOM 完全就绪时就可以被调用。此时，页面的所有元素对 JQuery 而言都是可以访问的。

window.onload下vue的dom层数据无法被修改解决

tcliuwenwen的博客

01-23

1437

博文背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> window.o

javascript模拟实现多次使用window.onload事件处理函数

叶落无痕的博客

07-06

3008

javascript模拟实现多次使用window.onload事件处理函数: 大家知道当文档内容完全加载完毕的时候就会触发window.onload事件，进而执行事件处理函数。不过利用window.onload注册事件处理函数的时候只能进行一次，因为后面的会将前面的覆盖，代码如下: [JavaScript] 纯文本查看复制代码运行代码 1 2

el-select远程搜索第一次请求返回时间长，导致第一次请求结果覆盖第二次请求

qq_37516924的博客

07-21

1154

方法外定义临时属性存储最后一次请求参数，返回时对比是否为想要的结果 remoteMethod(query) { if (query !== null && query.length > 1) { var dataTemp = { honourFlag: 1, attendeeNameLike: query,

vue window.onload 用法

08-26

- *2* [Vue要多次使用window.onload ,但出现第一次执行被第二次执行覆盖时](https://blog.csdn.net/qq_42573597/article/details/118357370)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630",...

笔记,前端重点 js,es6,vue2,vue3,小程序...... (记得收藏)

qq_61686552的博客

06-16

812

前端重点，重点，重点

使用window.postMessage()进行跨域页面通信时为什么还是提示跨域限制？

weixin_38434088的博客

04-08

741

问题背景：前端解决跨域问题方法中，有一种方法是使用window.postMessage()来进行不同源页面的通信。具体的用法可以参考MDN中关于该Api的解释和用法。但是知易行难，今天自己使用这个方法的时候却是遇到了很多意想不到的问题，在这里记录一下。踩到的坑： 1.window.open()打开新窗口后页面不加载使用的是window.open()方法，想通过这个方法打开一个新窗口然后获取新窗口的引用，但是发现打开新页面之后，浏览器的新窗口地址栏只是显示URL，但是并没有解析这个URL，相

解决window.onload事件重复赋值

LB065X的专栏

12-16

2126

最经遇到js window.onload事件被重复赋值的事，由于window.onload只能执行最后绑定的事件。所以绑定新的window.onload事件事需要把未知的已绑定的window.onload事件先进行迁移。如： oldonload=window.onload; window.onload=function(){ oldonload(); newonload

VUE @load事件触发多次分页

偷得浮生半日闲

08-19

836

VUE @load事件触发多次分页

window.onload()函数的使用

lei2350934xj的博客

05-25

422

.btn{ width:100px; height:30px; margin-left:10px; color:white; font-size:16px; line-height: 30px; text-align:

window.onload使用方法

Brain_hao的博客

03-14

631

我们经常使用 window.onload 来处理页面，当页面加载完成做一些事情。但这个 window.onload 是页面全部加载完成，甚至包括图片 1. window.onload = function(){} 2. window.onload ＝ functionName; // [color=red]注意:没有括号 3. IE: win

刷新调用2次onload_浏览器怪癖：onload / onunload不会向后/向前/刷新触发（Opera）...

IT与开发人员的地盘

07-08

520

刷新调用2次onload 问题向后，前进或刷新页面时，不会触发onload和onunload事件浏览器歌剧例任何使用onload或onunload的代码，例如 window.onload=init;其中，init（）是用于初始化某些变量的函数（例如）。解没有解决方案，因为据Opera开发人员和用户说，这不是错误。 Opera会维护脚本的运行状态，因此，就像我们回到...

vue 页面加载时触发的函数 mounted: function () {

kxukai的博客

12-19

7892

//页面加载时触发的函数 mounted: function () { this.adddata(); this.banklist(); this.editdata(); },

常用的window.onload等也有执行顺序影响

奉婷婷的博客

05-17

6226

在最近的项目中，我根据网页的需求,而因为我用了vue.js框架，所以用到这样的结构，不仅直接在javascript中直接编写了js代码，还通过import引入了其他的js文件，这些js文件一部分是通过原生js写的，一部分又是通过jquery写的，很不规范，但是我想，这样直接引入也是可以达到预期效果，那么解决这次的问题，下一次就要注意了。但是在测试中，我就发现了一系列的问题，比如impo

vue中window.onload的使用

06-28

### 回答1：在Vue中使用window.onload的方法是在mounted生命周期钩子函数中使用，因为在这个时候DOM已经加载完成。可以使用window.onload = function(){}或者window.addEventListener('load', function(){})来监听window的load事件，然后在回调函数中执行需要的操作。需要注意的是，如果在组件中使用window.onload，最好在组件销毁时移除事件监听，避免内存泄漏。 ### 回答2： Vue 中的 window.onload 主要被用于在页面加载完成后执行一些操作，例如渲染页面元素，绑定事件等。下面我们来详细了解一下在 Vue 中如何使用 window.onload。在 Vue 中，通常是将 window.onload 加入到组件的 mounted 生命周期中，即当该组件被挂载到 DOM 中完成之后执行。但是需要注意的是，如果在一个应用中存在多个组件，那么每个组件都会触发 mounted 生命周期，这就导致 window.onload 事件会多次触发。为了避免对渲染性能造成不良影响，我们可以使用 v-cloak 指令或者 Vue 自带的 transition 来解决该问题。通过 v-cloak 指令，可以将未编译完成的 Vue 模板隐藏起来，等到渲染完成后再显示出来。而通过 transition，可以在模板渲染完成之后再执行一些动画效果。另外，在 Vue 中使用 window.onload 还需要注意一个问题，即同步的数据并不会在 window.onload 中得到更新。因为 window.onload 是在 DOM 加载完毕后执行的，而 Vue 的数据是异步更新的，这就导致同步的数据在 window.onload 事件中并没有被渲染出来。因此，我们可以使用 Vue 提供的 nextTick 方法在 DOM 更新完成之后再执行一些操作。综上所述，在 Vue 中使用 window.onload 事件需要注意多种问题，需要结合 Vue 的生命周期、渲染性能、数据更新等多个因素来考虑。在具体的实践中，应该灵活运用这些技巧来处理不同的情况。 ### 回答3： Vue是一款流行的JavaScript框架，用于构建响应式的Web应用程序。Vue不能与传统的window.onload事件一起使用，因为Vue应用不是在window.onload事件发生后加载的。相反，Vue应用是在DOM树准备就绪后的Vue实例创建过程中加载的。因此，使用window.onload事件加载Vue应用是不必要的。 Vue提供了一种称为“生命周期挂钩”的方式来在特定时刻执行代码。在Vue实例创建并加载期间，Vue提供了一些生命周期钩子，可以在这些钩子中编写代码来执行特定的任务。在Vue中，可以使用created或mounted钩子来执行代码。created钩子用于在Vue实例创建后立即执行代码。mounted钩子在Vue实例挂载（即将显示在DOM中）后执行代码。如果需要在Vue加载后执行代码，应该使用mounted钩子而不是window.onload事件。下面是一个使用mounted钩子的示例： ``` <template> <div> <h1>Hello World</h1> </div> </template> <script> export default { mounted() { console.log('Vue app loaded'); // 在这里执行其他任务 } } </script> ``` 在这个Vue组件中，当Vue实例加载完毕后，mounted钩子会被调用并执行console.log语句。在此之后，可以在这个钩子中执行其他任务。总之，在Vue中，应该使用created或mounted钩子来执行代码，而不是使用window.onload事件。这可以确保在Vue应用程序加载时正确地执行代码。