关于Vue不能监听(watch)数组变化的解决方法
更新时间：2021年09月30日 11:56:00 作者：奥特曼
本文主要介绍了Vue不能监听(watch)数组变化的解决方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
一、vue监听数组
vue实际上可以监听数组变化，比如
data () {
return {
watchArr: [],
};
},
watchArr (newVal) {
console.log('监听：' + newVal);
},
created () {
setTimeout(() => {
this.watchArr = [1, 2, 3];
}, 1000);
},
在比如使用splice(0,2,3)从数组下标0删除两个元素，并在下标0插入一个元素3
data () {
return {
watchArr: [1, 2, 3],
};
},
watchArr (newVal) {
console.log('监听：' + newVal);
},
created () {
setTimeout(() => {
this.watchArr.splice(0, 2, 3);
}, 1000);
},
push数组也能够监听到。
二、vue无法监听数组变化的情况
但是数组在下面两种情况下无法监听
- 利用索引直接设置数组项时，例如arr[indexofitem]=newValue
- 修改数组的长度时，例如arr.length=newLength
举例无法监听数组变化的情况
1、利用索引直接修改数组值
data () {
return {
watchArr: [{
name: 'krry',
}],
};
},
watchArr (newVal) {
console.log('监听：' + newVal);
},
created () {
setTimeout(() => {
this.watchArr[0].name = 'xiaoyue';
}, 1000);
},
2、修改数组的长度
- 长度大于原数组就将后续元素设置为undefined
- 长度小于原数组就将多余元素截掉
data () {
return {
watchArr: [{
name: 'krry',
}],
};
},
watchArr (newVal) {
console.log('监听：' + newVal);
},
created () {
setTimeout(() => {
this.watchArr.length = 5;
}, 1000);
},
到此这篇关于关于Vue不能监听(watch)数组变化的文章就介绍到这了,更多相关Vue不能监听数组变化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue实现带放大镜的搜索框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
在使用Vue过渡动画时,注意选择器优先级,谨慎合并样式,Vue2中关于显示隐藏的类名有v-enter、v-leave以及v-enter-active、v-leave-active等,这些可以用来定义动画的持续时间和样式,感兴趣的朋友跟随小编一起看看吧2024-09-09
这篇文章主要介绍了vue如何自定义按钮单选和多选问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
Vue使用Multiavatarjs生成自定义随机头像的案例
这篇文章给大家介绍了Vue项目中使用Multiavatarjs生成自定义随机头像的案例,文中通过代码示例介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了Vue vuex配置项和多组件数据共享案例分享，文章围绕Vue Vuex的相关资料展开配置项和多组件数据共享的案例分享，需要的小伙伴可以参考一下2022-04-04
关于vue打包时的publicPath就是打包后静态资源的路径问题
这篇文章主要介绍了vue打包时的publicPath，就是打包后静态资源的路径,本文通过三种情况分析给大家详细介绍，需要的朋友可以参考下2022-07-07
这篇文章主要为大家详细介绍了vue实现学生信息管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
Vue.js是一个流行的前端框架,以其易于学习和使用而闻名,在Vue3中,借助于Composition API和新的setup语法糖,模板和渲染函数的使用变得更加灵活和强大,在这篇博客中,我们将深入探讨Vue3是如何处理模板和渲染函数的,并通过示例代码来展示如何有效利用这些功能2024-11-11
因为我们公司的项目是多页面应用,不同于传统单页面应用,一个包就可以了,下面这篇文章主要给大家介绍了关于Vite vue3多页面入口打包以及部署踩坑的相关资料,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了vue使用原生swiper代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
最新评论