vdom，v-if和v-show区别，v-for中的diff算法，splice方法

最新推荐文章于 2022-12-27 19:04:16 发布
最新推荐文章于 2022-12-27 19:04:16 发布
阅读量168 收藏
点赞数
分类专栏： JavaScript等前端学习之路 文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43717817/article/details/119707835
版权
1、vdom（virtual dom）

​ vue或react在加载dom前或先在vdom中加载然后再到dom中加载，在有相同组件且不冲突时会复用，比如用v-if，v-else控制的组件。此时会发生一种情况：组件中的内容不会被删掉，虽然切换了，但原组件中的内容还在。要想解决此问题，只需要在组件中设置不同的key。

2、v-if和v-show的差别

​ 当v-if为false时，dom中压根不会有该元素

​ 而v-show为false时只是多了display：none

3、v-for中的diff算法

​ 在v-for中未设置key时，每次插入数据会将插入位置后的数据依次后移，改变对应的key再插入。而设置key时，有了对应的key值就可以直接插入。这两种情况就像静态数组和链表数组的插入。

4、splice

​ splice（a , b ,c ,d …)

​ 第一个参数表示需要找到的下标的位置；

​ 第二个参数表示从a开始删b个元素，b可以是0；

​ 第三个参数及以后所有参数表示从a后面插入的元素；

​

万万兜鍪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue学习总结（九）——条件判断v-if、v-else-if、v-else、v-show指令
third_的博客
12-12 2276
入坑Vue.js（七）——网络封装
vhtml-loader：webpack加载器，用于将JSX作为HTML模板语言使用而没有任何DOM
02-12
vhtml-loader Webpack加载程序，使用将JSX渲染为HTML，而无需VDOM。动机您喜欢但讨厌使用EJS吗？ 该装载机适合您。 现在，您可以使用编写React应用程序其余部分的方式来编写模板：JSX。用法安装： yarn add --dev @...
v-if和v-for联用【Vue】
qq_22841387的博客
01-23 588
## 问题描述 `v-if`和`v-for`是互斥的，不能且不建议联用的，但是我又希望通过循环内部的元素，进行动态的渲染 ## 方法一：computed 例如，现在我需要过滤一个列表中的项目，通过`isActive`进行渲染 ```vue v-for="user in users" v-if="user.isAcive" ``` 这里就将users替换成一个计算属性比如(`activeUsers`） ```js computed(){ activeUsers:function(){ ret
vue中v-if和v-for的区别是什么
忧郁的蛋的专栏
12-27 4814
v-if和v-for的区别：1、作用不同，v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 true值的时候被渲染；而v-for指令基于一个数组来渲染一个列表。2、优先级不同，v-for优先级比v-if高，在进行if判断的时候v-for是比v-if先进行判断的。首先在官方文档中明确指出v-for和v-if不建议一起使用。
v-for和v-if一起使用的正确方法
weixin_43554584的博客
12-20 3万+
v-for和v-if尽量不要一起使用，有别的方法替代。
v-if案例 v- show 个人笔记
m0_47236916的博客
05-04 270
v-if案例（一点虚拟dom知识） <div id="app"> <span v-if="isUser"> <label for="username">用户账号</label> <input type="text" id="username" placeholder="用户账号"> </span> ...
remark-vdom：用于将Markdown编译为虚拟DOM的插件
02-04
备注 插件，用于将Markdown编译为 。 ... 支持脚注，待办事项列表 支持VNode 自定义组件将覆盖默认元素（ MyLink代替<a> ） 注意！ 这个插件是准备在备注新的解析器（ ，见 ）。...var vdom = requi
prolog-vdom:SWI-Prolog的虚拟DOM实现
05-10
该实现将VDOM树保留在Prolog端，并通过外语接口序列化初始树和修改。 演示： : 概述 有关实际的代码示例，请参阅和 Prolog代码在WebAssembly模块内部运行，该模块包含正在运行的SWI-Prolog实例。 页面和Prolog...
vhtml:将 JSXHyperscript 渲染为 HTML 字符串，无需 VDOM :rainbow:
07-24
网页版将 JSX/Hyperscript 渲染为 HTML 字符串，无需 VDOM 需要使用 HTML 字符串（angular？）但想使用 JSX？ vhtml 支持你。 构建组件？ 帮自己一个忙并使用安装通过 npm： npm install --save vhtml用法 // import...
vdom-render-to:用于创建和更新虚拟 dom 树的便捷功能
06-13
vdom-render-to 用于创建和更新树的便捷功能。动机简化从虚拟 dom 表示创建 DOM 树并更新它的步骤。安装npm install --save vdom-render-to 用var h = require('virtual-dom/h'); var vdomRenderTo = require('vdom-...
关于vue v-if 与 v-for
Calvert的博客
10-30 6874
不推荐同时使用 v-if 和 v-for。请查阅风格指南以获取更多信息。 避免 v-if 和 v-for 用在一起必要 永远不要把 v-if 和 v-for 同时用在同一个元素上。 一般我们在两种常见的情况下会倾向于这样做： 为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users替换为一个...
v-for和v-if
少油少盐不要辣
01-06 5607
1.当它们处于同一个元素节点时，v-for的优先级高于v-if。因此，v-if将重复运行于每个v-for循环中。 使用场景：当你仅仅想为数据项中的某些项渲染节点时，这种优先级机制非常有用。 如下：只渲染3和4这两个数据的节点 &lt;ul&gt; &lt;li v-for="num in numList" :key="num" v-if="num &gt;= 3"&gt;{{num}}&..
vue面试知识点总结 第二部分
肖帅的博客
10-15 204
vue 生命周期 1，说一下你对Vue的生命周期的理解 简单回答 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。 keep-alive 有自己独立的钩子函数 activated 和 deactivated。 复杂回答 |生命周期 发生了什么 beforeCreate created beforeMount mounted beforeUpdate updated beforeDes
diff算法_详解vue中的diff算法
weixin_39624332的博客
11-29 164
关键字: diff算法 key更高效 v-for中的index作为key的问题 虚拟dom给真实dom打补丁的过程 v-show v-if 初始数据请求放在created还是mounted里接上文先补充一下初识数据渲染放在哪个生命周期，一般的话created和mounted都可以，而且如果请求少的话也不会出什么问题，然后也看了很多分析说放在created的话如果请求过多会较长时间白屏（那这里...
vue中v-if和v-for能用在同一个标签吗-NO
JackieDYH的博客
09-15 3394
当v-if与v-for一起使用时，v-for具有比v-if更高的优先级，这意味着v-if将分别重复运行于每个v-for循环中 所以，不推荐v-if和v-for同时使用 一、不应同时使用 v-for和v-if不应该一起使用。 原因：v-for比v-if优先，即每一次都需要遍历整个数组，影响速度。 例如重构项目的时候遇到的旧代码： <div v-for="(fileMsg,index) in fileMsgList" :key="fileMsg.id" v-...
vue的基础原理使用(v-for、v-if同时使用等)
weixin_43845137的博客
12-30 1314
目录v-for、v-if同时使用，其优先级v-for与v-if的同时使用 v-for、v-if同时使用，其优先级 v-for 与 v-if 同时使用时，那个优先级更高 v-for的优先级更高一些！先做v-for的逻辑判断，之后再走v-if的逻辑判断 如果两者同时使用时，循环写再外层，判断写再里层，那么无论如何每一次渲染都会先循环后判断，造成性能的浪费 为了避免这种情况，则再外层套一个template，先template判断，后循环 v-for与v-if的同时使用 <template> &
vue 增加删除splice用法
qq_26522773的博客
02-07 4911
addWoolType:function(index){             var wooltype = this.$data.wooltype;   wooltype.splice(index+1,0,{}) }, removeWoolType:function(index){        var wooltype = this.$data.wooltype;   if ( woolty...
Vue源码阅读（22）：v-for 指令的源码解析
f18855666661的博客
08-26 1356
开始正文前，大家可以先复习一下 v-for 指令的用法，对应的官方文档点击这里。 今天和大家讲讲 v-for 指令的底层实现原理，它的底层实现其实很简单，主要看v-for 指令对应的代码字符串是如何生成对应 vnode 的，我们以一个简单的例子进行解析。 new Vue({ el: '#app', data() { return { names: ['小明', '小花', '小山'] } }, methods: {}, template: ` ..
Vue - v-if和v-else-if和v-else的使用
热门推荐
qq_33962481的博客
07-26 4万+
文章目录一、简单的演示二、v-if的使用三、v-if和v-else的使用三、v-if和v-else-if的使用 一、简单的演示 <body> <div id="app"> <p v-if="score>=90">优秀</p> <p v-else-if="score>=60">及格</p> </div> <script src="../js/vue.js"></sc
v-for index
最新发布
09-24
因为当列表中的子项发生变化时，如果key值使用的是index，那么在diff算法中，新旧vdom的key值将会一一匹配，导致所有子项都会触发更新机制，性能损耗较大。相反，如果使用唯一标识的字段作为key值，就可以避免这个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值