在vue中对数组值变化的监听与重新响应渲染操作


Posted in Javascript onJuly 17, 2020

在我们项目开发过程中,实例中的数据类型可以是对象、数组等。在对象中,某个属性值发生更改时,我们可以通过对象的深度监听,以达到重新渲染页面的需求。或者查阅这篇文章

例如:

<script>
 export default {
 data(){
 return {
 objVal: {
  name: 'obj',
  type: 'obj'
 }
 }
 },
 watch:{
 objVal:{
 handler(val,oldval){
 
 },
 deep: true,
 }
 },
 methods:{
 changeObj(){
 this.objVal.name = 'newobj';
 }
 }
 }
</script>

但是,在使用同一种方式进行数组值更改监听时,这种做法是无效的。

<script>
export default {
 data() {
 return {
 arrList: [1,2,3,4,5]
 };
 },
 watch: {
 arrList: {
 handler(val, oldval) {
 
 },
 deep: true
 }
 },
 methods: {
 changeArr() {
 // 无效
 this.arrList[0] = 10;
 }
 }
};
</script>

上述用以监听数组值变化的方法是无效的,vue是不会响应数据变化而重新去渲染页面。在vue中仅需要通过修改赋值语句的方式,即可让vue响应数组数据的变化。具体操作如下:

使用方法:

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

具体使用案例:

<script>
export default {
 data() {
 return {
 arrList: [1,2,3,4,5]
 };
 },
 methods: {
 changeArr() {
 // this.arrList[0] = 10;
 // 修改为:
 this.arrList.splice(0, 1, 10);
 }
 }
};
</script>

或:

<script>
export default {
 data() {
 return {
 arrList: [1,2,3,4,5]
 };
 },
 methods: {
 changeArr() {
 // this.arrList[0] = 10;
 // 修改为:
 this.$set(this.arrList, 0, 10);
 }
 }
};
</script>

以上两种方式,均可达到监听数组值变化的效果。

补充知识:vue数组操作不触发前端重新渲染

暂时使用给数组先赋值 [ ] ,然后重新赋值的方式解决。

此外,能够监听的数组变异方法

https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95

还有就是set

Javascript 相关文章推荐
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
简单的代码实现jquery定时器
Nov 17 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
Sep 22 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
js实现上下左右弹框划出效果
Mar 08 Javascript
关于vue.js组件数据流的问题
Jul 26 Javascript
vue移动端路由切换实例分析
May 14 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 Javascript
js实现滑动滑块验证登录
Jul 24 Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 #Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 #Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 #Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 #Javascript
简单了解常用的JavaScript 库
Jul 16 #Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 #jQuery
浅谈js中的attributes和Attribute的用法与区别
Jul 16 #Javascript
You might like
3种平台下安装php4经验点滴
2006/10/09 PHP
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
Bootstrap进度条实现代码解析
2017/03/07 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
谈谈如何手动释放Python的内存
2016/12/17 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
python 实现图片批量压缩的示例
2020/12/18 Python
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
周年庆典邀请函范文
2014/01/23 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
学党史心得体会
2014/09/05 职场文书
信用卡工资证明范本
2014/10/17 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang
Python如何配置环境变量详解
2021/05/18 Python
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技