vue2 操作响应式变量时需要注意! 响应式变量失去响应性

news/2024/11/23 0:16:48/

文档 

Vue 不能检测以下数组的变动:

  1. 当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
  2. 当你修改数组的长度时,例如:vm.items.length = newLength

举个例子:

var vm = new Vue({data: {items: ['a', 'b', 'c']}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将在响应式系统内触发状态更新:

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

你也可以使用 vm.$set 实例方法,该方法是全局方法 Vue.set 的一个别名:

vm.$set(vm.items, indexOfItem, newValue)

为了解决第二类问题,你可以使用 splice: 

vm.items.splice(newLength)

数组中有7种操作有响应式

array.pop()
array.push()
array.shift()
array.unshift()
array.sort()
arry.reverse()
array.splice()
以上7中API会修改原数组(vue2的内部重写了这7个API)

其他的操作都不会有响应式
 


http://www.ppmy.cn/news/262866.html

相关文章

机器学习聚类算法——BIRCH算法、DBSCAN算法、OPTICS算法

系列文章目录 前言 本文主要介绍BIRCH算法、DBSCAN算法、OPTICS算法,以及相关案例举例,以下案例仅供参考 一、BIRCH算法 1.1、BIRCH算法简介 BIRCH(Balanced Iterative Reducing and Clustering using Hierarchies,平衡迭代规约…

【Python爬虫框架】这5个Python爬虫框架你用过几个?最后一个秒杀全部

Python语言拥有丰富的第三方库,使得Python成为了最流行的爬虫语言之一。而Python的爬虫框架更是让Python爬虫开发更加高效。在这篇文章中,我们将探讨5个最常见的Python爬虫框架,并分析它们的优缺点,帮助你更好地选择合适的框架。 …

Vue模板语法的生命周期是什么?

Vue.js 是一个流行的 JavaScript 框架,用于构建单页应用程序。Vue.js 提供了许多功能,如组件、指令、计算属性和过滤器等,使开发人员能够更轻松地构建动态和交互式用户界面。其中,Vue.js 的模板语法是 Vue.js 框架中非常重要的一个…

网上超市管理系统

超市管理系统 功能 用户 修改用户信息 -> users [usr]购买商品 管理购物车 -> cart [ cart ] 添加商品修改商品删除商品清空购物车 购物车支付 -> cart [item] ,records [record]商品支付 -> records [record] 管理员 管理用户信息 -> users [user…

前端工程化初体验

最近在尝试着完整地体验一下前端工程化需要的那些流程,于是自己尝试一套属于自己的前端工程化流程。 前端工程化需要做什么: 1、创建项目需要有项目模板资源,所以这里我创建了一个前端脚手架CLI工具,mfex-project,主…

如何通过Shopee大数据选品,在3分钟选出热销爆款!

近年来,随着互联网技术的不断发展,人工智能和大数据成为越来越多人们熟知的概念。通过大数据分析进行选品,能够快速精准地预判各行业类目的变化趋势,帮助我们有效地优化选品、做出正确的销售决策。 大数据选品是指通过Shopee多品类…

面试 招聘网站

智联招聘 http://www.zhaopin.com 前程无忧 http://www.51job.com 中华英才网 http://www.chinahr.com 猎聘 http://www.liepin.com BOSS直聘 http://www.zhipin.com/c 以上这几个网站的校招和社招模块都做的不错,建议大家认真完善这几大网站上的简历资料&…

PyTorch 深度学习 || 专题六:PyTorch 数据的准备

PyTorch 数据的准备 1. 生成数据的准备工作 import torch import torch.utils.data as Data#准备建模数据 x torch.unsqueeze(torch.linspace(-1, 1, 500), dim1) # 生成列向量 y x.pow(3) # yx^3#设置超参数 batch_size 15 # 分块大小 torch.manual_seed(10) # 设置种子点…