vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue的虚拟DOM

vue的虚拟DOM使用方式

作者:Ocean__Lv

这篇文章主要介绍了vue的虚拟DOM使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

1. vue的虚拟DOM (VNode VDOM)

虚拟DOM就是一个JS对象,用它来描述真实DOM

1.1 为什么 virtual dom 是好用的

demo1: 多次执行dom操作

<body>
    <div style="width: 200px; border:1px solid #000;"></div>
    <script>
        var box = document.querySelector('.box');
        var count = 0;
        console.time('a')
        for (var i = 1; i < 10002; i++) {
            count = i
            box.innerHTML += count
        }
        console.timeEnd('a')
    </script>
</body>

demo2: 只执行一次dom操作

var box = document.querySelector( '.box' ) ;
    var num = “0” 
    console.time( 'b' )
      for ( var i = 1 ; i < 10002 ; i ++ ){
        num += i 
      }
      box.innerHTML = num
    console.timeEnd( 'b' )

1.2 更新DOM的三种方案的区别

第一种更新DOM的方案

缺陷:

第二种更新DOM的方案

缺陷:

第三种使用虚拟DOM的方案

虚拟DOM优点:

V(virtual虚拟)DOM的渲染流程、虚拟DOM的原理

2. vue中key值的作用

key是虚拟dom对象的标识 在更新时key起着极其重要的作用

2.1 理解key值的作用

当状态数据发生变化时,vue会根据【新数据】生成【新的虚拟dom】

随后vue进行【新的虚拟dom】与【旧的虚拟dom】的diff比较 比较规则如下:

a. 如果旧虚拟dom找到了与新虚拟dom相同的key

b. 如果旧虚拟dom未找到与新虚拟dom相同的key 根据数据创建新的真实dom随后渲染到页面

2.2 使用index索引值作为key值

数据:  

[{ id: 1, name: '小李', age: 18 },
{ id: 2, name: '小张', age: 19 }]

初始的虚拟dom

<li key=0>小李------18  <input type="text" /></li>
<li key=1>小张------19  <input type="text" /></li>

更新后的数据

{ id: 3, name: '小王', age: 20 },
{ id: 1, name: '小李', age: 18 },
{ id: 2, name: '小张', age: 19 }

更新数据后的虚拟dom

<li key=0>小王------20  <input type="text" /></li>
<li key=1>小李------18  <input type="text" /></li>
<li key=2>小张------19  <input type="text" /></li>

2.3 使用id索引值作为key值

数据:  

[{ id: 1, name: '小李', age: 18 },
{ id: 2, name: '小张', age: 19 }]

初始的虚拟dom

<li key=1>小李------18 <input type="text" /></li>
<li key=2>小张------19 <input type="text" /></li>

更新后的数据

{ id: 3, name: '小王', age: 20 },
{ id: 1, name: '小李', age: 18 },
{ id: 2, name: '小张', age: 19 }

更新数据后的虚拟dom:   

<li key=3>小王------20 <input type="text" /></li>
<li key=1>小李------18 <input type="text" /></li>
<li key=2>小张------19 <input type="text" /></li>

key的作用主要是为了高效的更新虚拟DOM, 其原理是vue在数据更新过程中通过key可以精准判断两个节点是否是同一个,从而避免频繁更新不同元素,使得整个更新过程更加高效,减少DOM操作量,提高性能。

另外,若不设置key还可能在列表更新时引发一些隐蔽的bug。

vue中在使用相同标签名元素的过渡(transition组件)切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,否则vue只会替换其内部属性而不会触发过渡效果。

3. v-if 和v-for为什么不能用在同一个元素

v-for比v-if优先,即每一次都需要遍历整个数组,影响速度。

<div
    v-for="(fileMsg,index) in fileMsgList"
    :key="fileMsg.id"
    v-if="index < 2"
    >
    <sys-file-layout :fileMsg="fileMsg"></sys-file-layout>
</div>

以上代码,如果有100条数据,虽然显示两条,但需要遍历100次,因为v-for优先

更好的解决方案: 是用computed先获取符合条件的数据,再进行遍历

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文