vue2响应式的缺点影响
短信预约 -IT技能 免费直播动态提醒
前言：
响应式：数据改变-->视图跟着变
对象新增的属性没有响应式 数组的部分操作没有响应式
push()，pop()，shift()，unshift()，splice()，sort()，reverse()
以上7中API会修改原数组(vue2的内部重写了这7个API)
其他的操作都不会有响应式
实际简单操作一波：
<template>
<div>
<span v-for="(item,index) in arr " :key="index">{{item}}</span>
<hr>
<button @click="arr[0]=100">点击把第一个元素变成100</button>
</div>
</template>
<script>
export default {
data() {
return {
arr:[1,2,3]
}
},
}
</script>
<style>
span{
margin: 10px;
background-color: orange;
padding: 10px;
border-radius: 5px;
} button{
background-color: orange;
font-size: 20px;
border: 0;
cursor:pointer;
}
</style>
你们会发现vue里面的数据其实已经改成100了,但是页面并没有渲染出来.
现在我们换一种,换成splice来操作：
<template>
<div>
<span v-for="(item,index) in arr " :key="index">{{item}}</span>
<hr>
<button @click="arr.splice(0,1,100)">点击把第一个元素变成100</button>
</div>
</template>
<script>
export default {
data() {
return {
arr:[1,2,3]
}
},
}
</script>
<style>
span{
margin: 10px;
background-color: orange;
padding: 10px;
border-radius: 5px;
} button{
background-color: orange;
font-size: 20px;
border: 0;
cursor:pointer;
}
</style>
数据修改的同时,dom也成功渲染
到此这篇关于vue2响应式的缺点影响的文章就介绍到这了,更多相关vue2响应式缺点内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
