生命周期created,mounted中console.log打印标签元素出错

最新推荐文章于 2022-09-21 11:09:19 发布
最新推荐文章于 2022-09-21 11:09:19 发布
阅读量563 收藏
点赞数
文章标签： vue.js javascript chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47929037/article/details/123805933
版权

1.不引入Vue.js时的正确打印

图1（如果一个元素拥有ID属性,那么ID属性的属性值就会成为window对象的属性名）

2. 引入Vue.js，在mounted或created中打印

不断地刷新浏览器，观察发现，打印结果会在图1两种打印方式的打印结果之间变化，且两种结果出现的概率在以下两种情况下有所不同：

（1）在mounted中打印与在created中打印

（2）使用谷歌浏览器或者Edge

重榆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
mounted 内写console.log 报错
小哈力----一个小前端工程师
01-31 510
原因：是eslint问题 解决办法：暂无
日常开发记录--mounted方法中打印的东西出不来原因
machine_vision123的博客
05-13 241
原因1：该页面是带缓存的 原因2：有两个mounted生命周期方法，第一个打印的被覆盖了
created与mounted执行顺序
weixin_小白鼠的博客
06-05 6694
created与mounted的执行顺序 最近在工作中发现created 里面的代码不一定比mounted中的代码先执行，下面的代码打印结果是什么呢？ export default { created() { console.log(1) this.printNum() console.log(3) }, mounted() { console.log(4) }, methods: { printNum() { se
vue mounted&&created内不识别console，this问题小记
zanxin0331的专栏
06-28 1782
换电脑新装了vue 调试了下没什么问题，突然要在mounted中调用一个方法，突然发现this无法点到对应的方法，并且还会报错： 和之前的写法一致，突然有点小懵。找了好久问题， 突然无意间加了：function试了下，好用了。就在这小记一下吧。 ...
Vue生命周期
qq_42366422的博客
08-19 273
Vue生命周期
在vue中使用console.log无效的解决
10-14
如果`console.log()`在组件的`created`、`mounted`等生命周期钩子中不生效，那可能是因为这些函数是异步执行的，导致`console.log()`在Vue实例完全初始化之前就被调用了。此时，可以尝试将`console.log()`放在`...
vueconsole通过consolelog来学习Vue各个过程的变化
08-10
在“vue-console”项目中，我们可以通过`console.log`来深入了解Vue在不同生命周期阶段的内部运作机制。这个项目是一个很好的实践，帮助开发者更好地理解Vue的工作原理，从而提高应用开发的效率和质量。 首先，让...
基于Vue实例生命周期(全面解析)
08-29
"基于Vue实例生命周期(全面解析)" Vue实例生命周期是指从创建到销毁的整个生命周期过程...这个示例展示了Vue实例生命周期的各个阶段，并在每个阶段执行了一些console.log语句，以便更好地了解Vue实例内部的运行机制。
vue3.0生命周期的示例代码
10-14
Vue2.x版本中已经对生命周期钩子有了成熟的实现，而在Vue3.0中，又引入了新的生命周期钩子和组织代码的新方式。 #### Vue3.0生命周期钩子 Vue3.0新增了几个生命周期钩子，同时保留了Vue2.x中的生命周期钩子，并...
Vue 生命周期钩子.doc
07-09
在 Vue 中，每个实例都有其特定的生命周期，即从创建到销毁的一系列过程。这个过程中的关键点被称为“生命周期钩子”，开发者可以利用这些钩子在特定时刻插入自定义逻辑。本文将深入探讨Vue生命周期钩子及其应用。 ...
console.log无法打印问题
weixin_45773788的博客
06-26 1万+
本人遇到情况：vue项目中watch监听器监听绑定事件，console.log在控制台无显示，尝试alert正常。可能原因一：浏览器过滤条件问题（网上最常见的原因但本人并不是） 解决方案：左侧top栏选择info，默认级别（Default levels）中信息选项（info选项）要勾选，筛选器中清空。可能原因二（本人遇到的原因查了很久）：浏览器扩展程序问题。解决方案：亲测删除多余扩展后（云文档等）功能恢复正常，在另一浏览器上也是如此，都是存在云文档这一扩展程序导致console.log打印失效。...
[Vue] mounted阶段获取不到dom的原因及解决方法
老电影故事的博客
05-09 9629
问题描述 需要在dom渲染后，获取dom来进行页面自动滚动到需要的位置。 在mounted阶段用document.querySelector()以及this.$refs获取元素均获取不到。用两种方式获取元素，打印出来的结果都是undefined。 有解答说用this.nextTick(function(){…})，试了一下在我这个场景中，结果还是undefined 分析原因 在mounted阶段，若需要获取的元素或组件有v-if，v-for属性。 v-if的初始化结果为false。v-for遍历的数组初始化
vue在mounted钩子中获取元素为undefined
dhhjd的博客
11-29 4410
为什么会出现在mounted钩子函数中获取元素失败呢 原因：我们的dom中的数据是通过异步获取到的 而mounted钩子函数只会执行一次并且在他执行的时候数据还没有请求过来 所以获取不到dom 解决方法：我们可以watch与dom相关的数据 这里我们异步获取的数据是list 因为我们watch数据变化后dom不会立即更新 这里需要加上nextTick这样我们就可以获取到dom元素了 **...
Vue mounted里打印数据为空
zmy967131的博客
09-21 896
Vue mounted里打印数据为空
vue的mounted和created方法的执行
weixin_43626356的博客
04-09 2975
Vue的created 和 mouted的执行顺序 今天在数据可视化的项目中，用了echarts和vue来进行展示。按照我的理解，先执行created中调用后台数据的接口，然后再进行echarts的展现。很遗憾一直失败，而且每次打印都有数据，但是始终无法给echarts绑定。 <template> <div class="map"> <dv-border-box-8 class="map-chart-border"> &lt
为什么props接收的值为undefined
weixin_43239880的博客
10-21 6860
在项目中,我们会经常使用到props传值,经常是由父组件传递给子组件一个值,然后我们在子组件中想去使用这个props接收的值,但是在created和mounted中打印,却发现是初始值或者为undefined,并不是我们在父组件中发送异步请求拿到的那个值.但是通过setTimeout设置了一定的时间之后,我们又能拿到对应的值.这是什么情况呢?解决4：使用v-if来判断,这样子在子组件中的created中就可以将有值的transData打印出来了。请求回来的, 请求的这个过程是需要时间的，但是。
Vue生命周期中mounted和created的区别
热门推荐
xdnloveme的博客
09-19 40万+
一、什么是生命周期？ 用通俗的语言来说，就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。虽然不太严谨，但是也基本上可以理解。 通过一系列实践，现在把所有遇到的问题整理一遍，今天记录一下created和mounted的区别： 二、created和mounted区别？ 官方图解如下: 我们从图中看两个节点： created:在模板渲染成html前调用，即通常初始化
【Vue】从后端获取数据后，对于监听修改模块导致在控制台打印出undefined
sakialice的博客
08-10 924
求助：js中数字和字符串比较没有自动转换
对这段代码进行详细中文注释<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue Lifecycle Demo</title> </head> <body> <div id="app"> {{ message }} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: 'Hello, Vue!' }, beforeCreate() { console.log('beforeCreate hook') }, created() { console.log('created hook') }, beforeMount() { console.log('beforeMount hook') }, mounted() { console.log('mounted hook') }, beforeUpdate() { console.log('beforeUpdate hook') }, updated() { console.log('updated hook') }, beforeDestroy() { console.log('beforeDestroy hook') }, destroyed() { console.log('destroyed hook') } }) </script> </body> </html>
最新发布
07-12
console.log('created hook') // 在实例创建完成后调用的生命周期钩子函数 }, beforeMount() { console.log('beforeMount hook') // 在编译模板之前调用的生命周期钩子函数 }, mounted() { console.log('...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值