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响应式缺点内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
这篇文章主要介绍了elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
vue/cli3.0脚手架部署到nginx时页面空白的问题及解决
这篇文章主要介绍了vue/cli3.0脚手架部署到nginx时页面空白的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本篇文章主要介绍了vue proxyTable 接口跨域请求调试的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
本篇文章主要介绍了如何快速入门Vue的方法，对0基础学习Vue的朋友会很有帮助，跟着小编一起来看下吧2016-12-12
这篇文章主要介绍了vue 封装面包屑组件教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要为大家介绍了vue中虚拟DOM与Diff算法知识的图文精讲，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
这篇文章主要介绍了用vue快速开发app的脚手架工具，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
详解如何使用Object.defineProperty实现简易的vue功能
这篇文章主要为大家介绍了如何使用Object.defineProperty实现简易的vue功能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要介绍了vue关闭eslint检查的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
目中出现多级菜单时,需要多层for循环时,但是当菜单增加层级时,需要在页面结构中增加一层for循环,这时我们可以使用组件递归的思想来实现,下面这篇文章主要给大家介绍了关于vue业务实例之组件递归及其应用的相关资料,需要的朋友可以参考下2022-05-05
最新评论