vue2响应式的缺点影响
更新时间：2022年05月26日 09:34:40 作者：pain_past_is_pleasur
这篇文章主要介绍了vue2响应式的缺点影响，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
前言：
响应式：数据改变-->视图跟着变
对象新增的属性没有响应式 数组的部分操作没有响应式
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响应式缺点内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue中的计算属性和axios基本使用回顾，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了vee-validate表单校验的基本使用,需要的朋友可以参考下2018-06-06
本文主要实现vue项目中,消息列表逐条向上无缝滚动,每条消息展示10秒后再滚动,为了保证用户能看清消息主题,未使用第三方插件,本文实现方法比较简约,需要的朋友可以参考下2024-06-06
对于Element组件的使用,最主要的就是明确自己想要达到的效果,从官网中将对应代码复制粘贴即可,最重要的是要读懂不同组件官网中提供的文档,以便实现自己想要的效果,本文给大家介绍Vue组件库Element-常见组件表格,感兴趣的朋友一起看看吧2023-10-10
今天小编就为大家分享一篇在vue中更换字体,本地存储字体非引用在线字体库的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
很多应用都会需要对不同的用户进行权限控制，本文主要介绍了Vue动态权限登录实现(基于路由与角色)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了Monorepo风格的组件工程搭建示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了如何手动销毁Vue中挂载的组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
el-form组件使用resetFields重置失效的问题解决
用el-form写了包含三个字段的表单,使用resetFields方法进行重置,发现点击重置或要清空校验时是失效的,所以本文给大家介绍了el-form组件使用resetFields重置失效的问题解决,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了Vue中如何使用base64编码和解码问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
最新评论