带你玩转vue——DOM节点v-if判断导致的生命周期问题

最新推荐文章于 2023-02-22 15:03:29 发布
最新推荐文章于 2023-02-22 15:03:29 发布
阅读量1k 收藏
点赞数 1
分类专栏： vue 文章标签： vue.js 生命周期 DOM节点v-if判断
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_38610980/article/details/120398534
版权

vue页面在生成过程中，会先加载页面中的DOM元素，如果我们在页面中使用v-if的判断条件，vue在页面加载的时候是不会生成该DOM节点的，如果我们在v-if条件判断的节点上使用this.$refs，则会出现该DOM没有被注册的情况，此时我们需要使用this.forceUpdate();在v-if语句判断生效后重新加载页面DOM节点 。

不吃带叶的
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue获取dom隐藏_vue.js - v-if获取dom节点的问题
weixin_39888412的博客
12-20 1413
问 题isShow默认是false，也就是点击的时候才会显示，但是这样的话显示后就没法获取dom了，有好的办法吗？或者说我把v-if改成v-show，但是这样的话v-focus就没效了，有没有办法点击的时候手动获取一下焦点v-model='i.mobileNumber'style="width:100%;"v-focus@refs="dom"v-if="isShow" >以下是v-focus...
详解vue中v-bind:style效果的自定义指令
10-15
Vue提供了多种生命周期钩子函数，让开发者可以在特定阶段执行相应的操作： - `bind`: 只调用一次，当指令首次绑定到元素时。 - `inserted`: 元素被插入到父节点时调用，但不保证已在文档中。 - `update`: 组件...
Vue源码阅读（18）：v-if、v-else、v-else-if 指令的源码解析
f18855666661的博客
08-21 7407
前面的 17 篇文章对 Vue 底层的核心运行机制进行了解析，接下来，开始对 Vue 中的众多特性进行针对化的讲解。 首先讲讲大家在工作中经常用到的 v-if、v-else、v-else-if 指令，这些指令是在模板编译阶段实现的。 1，v-if v-if 的用法如下所示： <template> <div id="app"> <h1 v-if="isShow">Hello Vue h1</h1> </div> </t
vue如何判断dom的class
12-29
vue点击给dom添加class然后获取含有class的dom <div class=chose-ck v-for=(item,index2) key=index2 ref=chosebox> <p>{{item.name}}</p> <dt v-for=(item2,index) in item.childsCurGoods :key=item2.id :class=index==iac[index2]?'check':'' :id=item2.id :data-c
如何检查一个dom元素是否存在
11-05 688
如何检查一个dom元素是否存在 http://www.aaronrussell.co.uk/blog/check-if-an-element-exists-using-jquery/Monday, 15 September 2008How to check whe...
vue dom多状态判断
m0_37166480的博客
12-24 584
vue dom多状态判断 欢迎使用Markdown编辑器 List item 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录欢迎使用Markdown编辑器前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个
vue使用自定义指令 判断所点击区域是否在某个dom节点内
weixin_43827751的博客
07-21 1280
directives{{functionhandleFun(e){//判断所点击dom是否为el的节点console.log('在节点内')}else{console.log('在节点外')}}}}},
关于vuejs中v-if和v-show的区别及v-show不起作用问题
10-18
v-if在渲染元素时，会进行条件判断，如果条件不满足，则不会创建对应的DOM节点，也就是说，使用v-if时，只有当条件为真时，元素才会被创建并渲染到页面上，而当条件不满足时，页面上甚至不会存在该元素。从另一个...
前段v-if测试最终版.zip
04-17
相比`v-show`，`v-if`在条件为假时不会生成DOM节点，因此在需要频繁切换或者条件分支复杂的情况下更优。 项目中提到的“高级代码封装示例”可能是指将常见的`v-if`逻辑抽离成可复用的组件或混入（mixins）。混入是...
vue生命周期实例小结
10-18
Vue实例在其生命周期中经历一系列的初始化、运行和销毁过程，每个阶段都有相应的钩子函数，允许开发者在特定时刻执行特定的操作。下面是对Vue生命周期的详细解释： ### 初始化阶段 1. **`beforeCreate`**：在Vue...
vue函数生命周期.rar
01-06
"vue函数生命周期.rar"这个压缩包文件显然提供了关于Vue组件生命周期的图片和相关理解，对于初学者来说，了解这些概念至关重要。 Vue组件的生命周期可以分为几个主要阶段： 1. **创建阶段**： - `beforeCreate`：...
如何检查可见DOM中是否存在元素？
CHCH998的博客
06-04 1035
How do you test an element for existence without the use of the getElementById method? 如何在不使用getEle
Vue笔记
qq_40910781的博客
08-27 557
仅列出常用的，常有不足之处请斧正 执行顺序 初始化：beforeCreate ->Props -> Methods -> Data -> Computed -> Watch -> created>before>beforeMount>directive>mounted（请按照初始化顺序操作数据，避免获取不到数据） 数据改变：method>watch>beforeUpdate>computed>updated（你可.
Vue底层原理之虚拟DOM（2）节点更新流程
weixin_44383261的博客
05-25 704
更新节点的流程： 先完成不是同一个节点的情况： patch.js: import vnode from './vnode' import createElement from './createElement' export default function(oldVnode,newVnode){ // 判断传入的第一个参数是DOM节点还是虚拟节点 if(oldVnode.sel==''||oldVnode.sel==undefined){//没有sel属性就是DOM节点 o
DOM v-if v-else
m0_60746035的博客
08-22 298
{ id:"14", title:"联系电话", valueDom:"telphone", type:'cell' },{ id:"1", title:"车号", valueDom:"vehicleNo", type:'cell' },{ id:"13", title:"身份证号", valueDom:"cardNo", type:'cell' },{ id:"15", title:"住址", valueDom:"address", type:'cell' },
vdom
martineden2010的博客
07-12 144
vdom vdom virtual dom，虚拟DOM 用JS模拟DOM结构 DOM变化的对比，放在JS层来做（图灵完备语言） 提高重绘性能 1、知识点一 一个简单的dom结构 <ul id='list'> <li class='item'>Item 1</li> <li class='item'>Item 2</...
富文本使用v-if重新加载dom问题
weixin_45797900的博客
05-19 582
之前在开发中遇到一个问题，就是要动态生成wangEditor富文本编辑器。 然后结构是有tab标签切换的，当时标签的是v-if来判断显示。导致页面报错，找不到dom元素生成富文本标签。 后面才发现用的是v-if重新加载dom元素导致找不到id生成富文本，后面改成v-show就解决问题了。 错误的： <div v-if="show"> <el-form-item label="文本文案："> // 生成富文本的div <div id="Ed
keep-alive上加v-if导致缓存失效
小妹的博客
12-24 4099
是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们 用法 <keep-alive> 正确用法 <router-view v-if="$route.meta.keepAlive"></router-view> </ke...
Vue3学习记录——(2)虚拟DOM、事件缓存
最新发布
qq812457115的博客
02-22 745
（事件缓存）在vue2.x中在绑定DOM事件时，例如@click，这些事件被认为是动态变量，所以每次更新视图的时候都会追踪它的变化，然后每次触发都要重新生成全新的函数，在Vue 3中，提供了事件缓存对象cacheHandlers，当cacheHandlers开启的时候，@click绑定的事件会被标记成静态节点，被放入cacheHandlers中，这样在视图更新时也不会追踪，当事件再次触发时，就无须重新生成函数，直接调用缓存的事件回调方法即可，在事件处理方面提升了Vue的性能。
Vue逻辑渲染：理解v-if、v-show与MVVM模式
`v-if`用于根据表达式的真假决定元素是否显示，当条件改变时，对应的DOM节点会被销毁和重建，从而避免不必要的计算和内存占用。然而，`v-if`的缺点是它会导致元素的显隐切换有短暂的空白期。相比之下，`v-show`则...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值