vue数据监听 -key的作用
文章目录
1:数组翻转 2：数组截取 3：更新值
- 数组变更方法，就会导致v-for更新，页面更新
(push,pop,shift,unshift,splice,sort,reverse)
-
数组非变更方法，返回新数组，不会导致v-for更新，可采用覆盖数组 或this.$set
（filter，concat,slice）
<body>
<div id="app">
<ul>
<li v-for="(val,index) in arr" :key="index">{{val}}</li>
</ul>
<button @click="revBtn">数组翻转</button>
<button @click="sliceFn">截取前3个</button>
<button @click="updateFn">更新第一个元素值</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
arr: [4, 3, 2, 1, 4, 5, 7],
},
methods: {
revBtn() {
// 数组翻转 可以让v-for更新
this.arr.reverse()
// console.log(this.arr)
},
sliceFn() {
// 数组slice 不会造成v-for更新
// slice不会改变原数组
// this.arr.slice(0, 3)
// console.log(this.arr)
// 解决v-for更新，覆盖原始数组
let newArr = this.arr.slice(0, 3)
this.arr = newArr
},
updateFn() {
// 更新某个值的时候 v-for是监测不到的
this.arr[0] = 1999
// 解决 this.$set
// 参数1 更新目标结构(对象/数组)
// 参数2 更新位置
// 参数3 更新值
this.$set(this.arr, 0, 1999)
},
},
})
</script>
v-for如何更新DOM呢
真实DOM
document对象上，渲染到浏览器上显示的标签
虚拟DOM
本质是保存节点信息 ，属性和内容的一个js对象
内存中虚拟dom比较
内存中比较变化的部分，然后给真实DOM打补丁(更新)
虚拟DOM好处
提高DOM更新的性能，不频繁操作真实的DOM,在内存中找到变化的部分，更新真实的DOM（打补丁）
diff算法
diff算法是通过同级比较 来比较新旧虚拟dom
根元素变化 删除重新建立整个dom树
根元素未变 属性改变 DOM复用 只更新属性
同级比较，根元素变化-整个dom树删除重建
同级比较，根元素不变-属性改变 更新属性
标签内子标签/内容改变
diff分两种情况比较
1：无key 就地更新
2：有key按照key比较
key值要求：唯一不重复得字符串或者数值
key使用：有id用id，无id用索引
key得好处：配合虚拟DOM提高更新性能
无key
从第二个往后更新内容–性能不高
有key，值为索引
有key属性，基于key的来比较新旧虚拟dom。移除key不存在元素
有key,值唯一不重复的字符串或数字
551
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
