Vue 中如何监测数组的变化?

在 Vue 中,如果直接对数组进行操作,比如使用下标直接修改元素,数组长度不变时, Vue 是无法监测到这种变化的,导致无法触发视图更新。针对该问题,总结如下解决方法:

一、使用 Vue.js 提供的方法来更新数组

在 Vue.js 中,可以使用 Vue.set(target, key, value)vm.$set(target, key, value) 来监测数组变化。例如:

// 使用 Vue.set()
Vue.set(vm.items, indexOfItem, newValue)

// 使用 vm.$set
vm.$set(vm.items, indexOfItem, newValue)

除了上述方法之外,Vue.js 还提供了一些其它的方法来监测数组变化,如 push()pop()shift()unshift()splice()sort()reverse()。这些方法都是基于数组原型链上的方法,Vue.js 通过重写这些方法来监测数组变化。

例如,如果要在数组末尾添加一个新的元素,可以使用 vm.items.push(newItem)

你也可以使用vm.items.length = newLength来修改数组长度,这样也会触发视图更新。

总之,在 Vue.js 中,如果你想要监测数组变化,最好使用 Vue.js 提供的方法来更新数组。

二、使用专门用于监测数组变化的语法糖

另外,Vue.js提供了一些专门用于监测数组变化的语法糖,如 v-for 指令,它允许我们遍历数组并渲染每个元素。当数组发生变化时,v-for 指令会自动重新渲染视图。

三、使用Vue.observable()函数

还有,对于对象变化的监测,我们可以使用Vue.observable()函数来创建一个可监测的对象。

使用 Vue.observable() 可以避免使用 Vue.set() 或 vm.$set() 来监测对象的变化。

例如:

const obj = Vue.observable({
  prop: 'value'
})

四、使用 computed 属性和 watch 属性监测数组变化

computed 属性是 Vue.js 中的一种计算属性,它可以根据其他属性的值进行计算得到新的值。当其他属性的值发生变化时,computed 属性也会随之变化。

watch 属性是 Vue.js 中的一种监听属性,它可以监听某个属性的变化并执行相应的函数。

例如:

computed: {
  filteredItems() {
    return this.items.filter(item => item.age > 18)
  }
},
watch: {
  items: {
    immediate: true,
    handler() {
      console.log('items changed')
    }
  }
}

使用 computed 和 watch 属性可以方便地监测数组和对象的变化,并执行相应的操作。

五、使用 Deep Watcher 方法

watch: {
  'myArray': {
    deep: true,
    handler: function (val) {
    // do something with the new and old value of myArray
    }
  }
}

当 deep 为 true 时,Vue 会递归监测数组中所有对象的变化,但是会带来一些性能开销,所以在实际使用中需要根据实际需要来确定是否使用 deep watcher。

六、使用 $watch 函数

mounted() {
  this.$watch(
    'myArray',
    function(newVal, oldVal) {
      // do something with the new and old value of myArray
    },
    {
      deep: true
    }
  )
}

$watch 方法接收三个参数,第一个是要监测的属性,第二个是回调函数,第三个是配置对象,可以使用 deep 选项来监测对象中的变化。

七、使用 Vue 的 $forceUpdate() 方法

使用 Vue 的 $forceUpdate() 方法来强制组件重新渲染,这样就可以监测到数组的变化。

this.$forceUpdate()

这样做会让组件强制重新渲染, 但是这样会有一些性能开销,所以不建议在组件中频繁使用 $forceUpdate()。

八、使用 Vue 中的 $nextTick() 方法

使用 Vue 中的 $nextTick() 方法来监测数组变化。$nextTick() 函数可以在下一次 DOM 更新循环结束之后执行延迟回调。

this.$nextTick(() => {
  // your code
})

这样可以确保在数组变化之后再执行相关的操作,这样就可以监测到数组的变化。

九、使用 reactive 函数

Vue3 中可以使用 reactive 函数来创建响应式的数组,这样就可以监测到数组的变化。

import { reactive } from 'vue'

const state = reactive({
  myArray: [1, 2, 3]
})

这样Vue3就会自动监测 myArray 变化。

十、使用 vue-devtools 中的 track 功能

注意:该方法无法解决修改数组未触发视图更新的问题,属于数组监测问题

 

总之,Vue.js 提供了多种方法来监测数组和对象的变化,如使用 Vue.set(),splice(),$set(),$delete(),watch,computed,$watch(),vue-devtools 中的 “track” 功能,Vue3 中的 reactive 函数,$forceUpdate() 和 $nextTick() 等方法,可以根据需要选择合适的方法来实现。

作者:yuzhihui
出处:http://www.cnblogs.com/yuzhihui/ 声明:欢迎任何形式的转载,但请务必注明出处!!!
本文转载于网络 如有侵权请联系删除

相关文章

  • Python当前文件路径与文件夹删除操作

    前言:  Python的文件操作跟Java存在部分差异。由于项目需要,近期使用python进行模块开发时遇到一些常见的文件操作便上网搜罗了一番,感觉众说纷纭。因此,结合自身的使用场景,贴一段python代码供后续查阅。准备一个测试文件“c://test/a.txt”。#encoding:utf-8 importos importshutil if__name__=='__main__': print"currentworkspacedirectory------------>" printos.path printos.getcwd() printos.getcwdu() print print"file(s)operation------------>" path1="c:/test/a.txt" path2="c:/test" printos.path.exists(path1) printos.path.exists(path2) #os.removedirs(

  • Spring学习总结(五)——Spring整合MyBatis(Maven+MySQL)二

    目录一、在Web项目中启动Spring容器1.1、使用监听器启动Spring容器1.2、使用Servlet方式启动Spring容器二、获取ApplicationContext实例2.1、使用工具类WebApplicationContextUtils获得Spring容器2.2、实现接口ApplicationContextAware三、基于注解的声明式事务管理配置四、示例下载接着上一篇博客《Spring整合MyBatis(Maven+MySQL)一》继续。Spring的开放性和扩张性在J2EE应用领域得到了充分的证明,与其他优秀框架无缝的集成是Spring最为强大的功能。Spring类似电脑的主板,可以将许多部件集成在一起协调工作。一、在Web项目中启动Spring容器在Web项目中当Web容器启动时我们要同时启动Spring容器,有三种办法,第一种使用监听器启动,第二使用Servlet启动,第三使用MVC框架的扩展点启动,这里主要选择第一种,因为监听器的启动时机早于Servlet。强烈建议使用办法一。1.1、使用监听器启动Spring容器我们需要使用到Spring定义好的一个监听器:or

  • 2.05-random-uesr-proxy

    importurllib.request defproxy_user(): proxy_list=[ {"https":""}, #{"https":"106.75.226.36:808"}, #{"https":"61.135.217.7:80"}, #{"https":"125.70.13.77:8080"}, #{"https":"118.190.95.35:9001"} ] forproxyinproxy_list: print(proxy) #利用遍历出来的ip创建处理器 proxy_handler=urllib.request.ProxyHandler(proxy) #创建opener opener=urllib.request.build_opener(proxy_handler) try: data=opener.open("http://www.baidu

  • 面试心得:一个BAT大厂面试者整理的Android面试题目,五轮面试后终于拿到Offer!

    金九银十了,最近身边好多朋友都裸辞了,但是发现工作并没有想象中那么好找。朋友小A一心只想进大厂面试Android,于是面试了阿里巴巴、美团、滴滴等,最后在某个大厂经历了5轮面试后拿到了offer。今天我将他面试的大厂Android面试题目整理出来,希望能够帮助大家!阿里巴巴LRUCache原理图片加载原理模块化实现(好处,原因)JVM视频加密传输统计启动时长,标准如何保持应用的稳定性ThreadLocal原理谈谈classloader动态布局热修复,插件化HashMap源码,SpareArray原理性能优化,怎么保证应用启动不卡顿怎么去除重复代码SP是进程同步的吗?有什么方法做到同步介绍下SurfViewHashMap实现原理,ConcurrentHashMap的实现原理BroadcastReceiver,LocalBroadcastReceiver区别Bundle机制Handler机制android事件传递机制线程间操作ListApp启动流程,从点击桌面开始动态加载类加载器OSGIHttps请求慢的解决办法,DNS,携带数据,直接访问IPGC回收策略画出Android的大体架构图描述

  • LeetCode 1284. 转化为全零矩阵的最少反转次数(BFS & 矩阵状态编码解码)

    1.题目给你一个mxn的二进制矩阵mat。每一步,你可以选择一个单元格并将它反转(反转表示0变1,1变0)。如果存在和它相邻的单元格,那么这些相邻的单元格也会被反转。(注:相邻的两个单元格共享同一条边。)请你返回将矩阵mat转化为全零矩阵的最少反转次数,如果无法转化为全零矩阵,请返回-1。二进制矩阵的每一个格子要么是0要么是1。全零矩阵是所有格子都为0的矩阵。示例1: 输入:mat=[[0,0],[0,1]] 输出:3 解释:一个可能的解是反转(1,0),然后(0,1),最后是(1,1)。 示例2: 输入:mat=[[0]] 输出:0 解释:给出的矩阵是全零矩阵,所以你不需要改变它。 示例3: 输入:mat=[[1,1,1],[1,0,1],[0,0,0]] 输出:6 示例4: 输入:mat=[[1,0,0],[1,0,0]] 输出:-1 解释:该矩阵无法转变成全零矩阵 提示: m==mat.length n==mat[0].length 1<=m<=3 1<=n<=3 mat[i][j]是0或1。复制来源:力扣(LeetCode) 链接:https:/

  • LeetCode 454. 四数相加 II(哈希)

    1.题目给定四个包含整数的数组列表A,B,C,D,计算有多少个元组(i,j,k,l),使得A[i]+B[j]+C[k]+D[l]=0。为了使问题简单化,所有的A,B,C,D具有相同的长度N,且0≤N≤500。所有整数的范围在-228到228-1之间,最终结果不会超过231-1。类似题目:POJ27852.解题二分查找,最后一个例子超时 classSolution{ int*ab,*cd; public: intfourSumCount(vector<int>&A,vector<int>&B,vector<int>&C,vector<int>&D){ intn=A.size(),i,j,k=0,ans=0; intN=n*n; ab=newint[N]; cd=newint[N]; for(i=0;i<n;++i) for(j=0;j<n;++j) ab[k++]=A[i]+B[j]; k=0; for(i=0;i<n;++i) for(j=0;j<n;++j) cd

  • 命保住了!五年时间,我们也搞了一个技术中台

    题图:fromZoommy在技术圈,每年总有那么一拨人,喜欢把“某某岗位要不要写代码”这样的话题拿出来讨论一番。比如,前年的话题是CTO要不要写代码,去年的话题是架构师要不要写代码,今年的话题是技术总监要不要写代码……按这逻辑,明年的话题是不是要讨论工程师要不要代码?说实话,我并不喜欢讨论这类话题,因为每家公司的客观环境与人文价值观都不相同,聊这些,除了引发争吵,不会从中得到更多。相比之下,我更愿意参与一些技术话题的讨论,因为大家面对的场景相似,采用的技术也相似,这样能更容易产生共鸣,更容易擦出“爱”的火花。就在刚过去的半年里,「中台」成了技术圈内讨论的热门词汇,就连一些名不见经传的小公司,也都纷纷喊出了「要向中台转型!」的口号,甚至有人说「不做中台,那就等着死吧!」如果我没有记错,「中台」思想源自于2015年,马云参观一个著名的游戏公司Supercell之后提出了,简言之就是“小前台、大中台”,随即阿里就成立中台事业群,并取得了很好的成效。随后,美团点评也开始走中台策略,腾讯在去年的组织架构调整中,也提出建设具有“腾讯特色的技术中台”。技术中台的作用是什么?要搞明白这点,你需要先搞清

  • 异步操作Celery的实现

    celery: 使用场景: 主要用于做异步 1.解决一些耗时的操作(在原进程继续执行的情况下,开一个新的进程运行比较耗时的程序,让celery去做耗时的事情,给用户一个快速地响应,跑完给一个信号就可以了,不需要让用户等太长时间) 2.定时执行某些任务(网站天气定时的更新)celery中的名词: 任务task:就是一个python函数(要执行的耗时操作) 队列queue:将需要执行的任务加入到队列中 工人worker:开一个新的进程中,负责执行队列中的任务 代理人borker:负责调度,将任务加入到队列queue中,在布置环境中一般使用redis安装celery包: celery==3.1.25 celery-with-redis==3.0 djagno-celery==3.1.17在django的setting文件中添加app: INSTALLED_APPS=[    ...    "djcelery", ] 同时在setting的末尾追加: importdjcelery djcelery.setup_loader()负责将任务加入队列 BROKER_URL=&#

  • 自动化工程师必备:如何选择执行机构气动和电动?

    1.执行机构选择的主要考虑因素①可靠性;②经济性;③动作平稳、足够的输出力矩;④结构简单、维护方便。2.电动执行机构与气动执行机构的选择比较(1)气动执行机构简单可靠老式电动执行机构可靠性差是它过去的一贯弱点,然而在90年代电子式执行机构的发展彻底解决了这一问题,可以在5~10年内免维修,它的可靠性甚至超过了气动执行机构。(2)驱动源气动执行机构的最大不足就是需别设置气源站,增加了费用;电动阀的驱动源随地可取。(3)价格方面气动执行机构必须附加阀门定位器,再加上气源,其费用与电动阀不相上下(进口电气阀门定位器与进口电子式执行机构价格相当;国产定位器与国产电动执行器不相上下)。(4)推力和刚度:两者相当。(5)防火防爆“气动执行机构+电气阀门定位器”略好于电动执行机构。3.推荐意见(1)在可能的情况下,建议选用进口电子式执行机构配国产阀,以用于国产化场合、新建项目等。(2)薄膜执行机构虽存在推力不够、刚度小、尺寸大的缺陷,但其结构简单,所以,目前仍是使用最多的执行机构。但这里我们强调的是最好选用ZHA、ZHB型的精小型薄膜执行机构去代替ZMA、ZMB型的老式薄膜执行机构,以获得更轻的重量

  • Android开发--取消AsyncTask

       在Android应用开发过程中,为了防止UI线程堵塞,耗时的工作都应该另起一个后台线程来完成,其中AsyncTask就是其中的一种方式。最近在案子中需要“停止/取消”某个AsyncTask,在网上查了些资料,这里做个笔记。    查看AsyncTask.java文件,其中有个cancel()函数,可以通过调用cancel(true)来停止正在运行的AsyncTask。 /** *<p>Attemptstocancelexecutionofthistask.Thisattemptwill *failifthetaskhasalreadycompleted,alreadybeencancelled, *orcouldnotbecancelledforsomeotherreason.Ifsuccessful, *andthistaskhasnotstartedwhen<tt>cancel</tt>iscalled, *thistaskshouldneverrun.Ifthetaskhasa

  • JVM是如何分配和回收内存?有实例!

    上一篇博客我简单介绍了下如何手动计算一个Java对象到底占用多少内存?今天就想聊下这个内存JVM到底是是如何分配和回收的。 Java整体来说还是一个GC比较友好的语言,无论是分代的垃圾收集,还是基于GCRoots的可达性算法都是业界普遍的经典做法,关于Java的内存区域划分以及GC的一些基本知识,我这里就不赘述了,可以看我之前的博客:http://zhanjindong.info/category/note/dsbj/ 《深入理解Java虚拟机第2版》这本书非常值得一看,最近几篇读博客都算这本书的读书笔记吧。本人文笔很烂,所以都是记流水账枯燥乏味的文章。进入正文之前还是要交代下环境:以下内容都是基于HotSpot虚拟机Server模式,垃圾收集器用的是默认的Serial和SerialOld。   JVM内存分配和回收策略 话说一图胜千言,本也打算画张活动图就了事了: 但是画完发现:一画图更麻烦,太大了看的累(想看的可以在新建窗口放大了看),其次感觉还是说不清楚(画的不对的地方欢迎批评),最后觉得还是文字描述一下整个流程: 1、当JVM给一个对象分配内存的时候,如果启动了本

  • Paxos 实现日志复制同步(Basic Paxos)

    Paxos实现日志复制同步 本篇文章以JohnOusterhout(斯坦福大学教授)和DiegoOngaro(斯坦福大学获得博士学位,Raft算法发明人)在Youtube上的讲解视频及ppt为蓝本,深入分析Paxos的内部机制,并以日志复制同步(ReplicatedLogs)为背景,详细介绍使用Paxos协议实现日志复制同步。 用Paxos实现日志复制同步 Paxos是在十九世纪80年代末由LeslieLamport发明的,从那开始Paxos几乎就成为了分布式系统共识性的同义词。当大学教授分布式系统共识性的时候,几乎总是使用Paxos作为算法。Paxos或许是在所有分布式系统算法中唯一重要的算法。 下面会以日志复制同步为背景介绍Paxos,并用日志拷贝创建副本状态机(replicatedstatemachine),当说到状态机时,这里指的是一个接收一些输入和生成一些输出,并保留一些内部状态的程序或应用,可以将几乎所有的程序都看成一个状态机。这里的想法是让一个状态机高度可靠,可以通过在多个不同的服务器上并行地运行多个状态机来达到此目的。如果每个状态机都以相同的顺序接收到同样的命令集合,

  • Python 自动化之验证码识别

    之前公司的验证码比较简单,可以采取直接破解的方式进行登录 部分代码如下: #-*-coding:utf-8-*- fromseleniumimportwebdriver fromselenium.webdriver.common.byimportBy fromselenium.webdriver.common.keysimportKeys fromselenium.webdriver.support.uiimportSelectimportunittest,time,re,sys fromPILimportImage importpytesseract reload(sys) sys.setdefaultencoding('utf-8') classYpt(unittest.TestCase): defsetUp(self): self.driver=webdriver.Chrome() self.driver.implicitly_wait(30) self.base_url="http://*********.com" self.verificationErrors=[]

  • HIVE SQL产生的文件数量及参数调优

      产生背景:sqoop抽取oracle数据到hive表时,只能写入到固定分区(--hive-partition-key#hive分区字段 --hive-partition-value#hive分区值)。于是先把数据抽取到一张增量表,然后从增量表动态写入分区表。 sethive.exec.dynamic.partition.mode=true;  --使用动态分区时,设置为ture。 sethive.exec.dynamic.partition.mode=nonstrict;  --动态分区模式,默认值:strict,表示必须指定一个分区为静态分区;nonstrict模式表示允许所有的分区字段都可以使用动态分区。一般需要设置为nonstrict。 sethive.exec.max.dynamic.partitions.pernode=10;  --在每个执行MR的节点上,最多可以创建多少个动态分区,默认值:100。 sethive.exec.max.dynamic.partitions=1000;  --在所有执行MR的节点上,最多一共可以创建多少个动态分区,默认值:100

  • centos7之zabbix服务器的常规优化及其它设置

    一、硬件需求分析   1、首先我们来分析一个硬件需求,这里我以400个agent计算,CPU建议是4核,内存不要少于8GB,硬盘只要不是用了很久的主机就行,容量的话建议300GB基本就够使用好一段时间了,如果agent太多,可以使用分布式监控。 二、服务器配置文件优化   2、服务器配置文件说明 #zabbix-server的日志文件路径 LogFile=/tmp/zabbix_server.log ##当日志文件达到多大时进行轮询操作 LogFileSize=100 #数据名称 DBName=zabbix #数据库授权用户 DBUser=zabbix #数据库授权用户的密码 DBPassword=zabbix #一般情况下默认即可(模式认识5) StartPollers=50 初始的Unreachable主机检查进程(也就是不可达的进程数) StartPollersUnreachable=30 ##打开的进程数 StartTrappers=5 #同上,意思是同时开多少个ping检测的进程,不易太大,特别耗cpu和数据库连接数 StartPingers=10 #同上,默认即可 Sta

  • eclipse项目名称后面括号里的名称和项目名称不一样

    解决方案: 1:项目右键-属性(Properties)-WebProjectSetting,改名称注意:这个名字将成为你在浏览器访问的路径 2:打开项目目录的.setting文件夹,随便一个文本编辑器打开org.eclipse.wst.common.component文件,修改内容: <?xmlversion="1.0"encoding="UTF-8"?><project-modulesid="moduleCoreId"project-version="1.5.0">  <wb-moduledeploy-name="项目名字">    <wb-resourcedeploy-path="/"source-path="/WebContent"tag="defaultRootSource"/>    <wb-resourcedeploy-path="/WEB-INF/classes"source-path="/src"/>    <propertyname="java-output-path"value="/项目名字/bui

  • Javascript的加载

    最新博客站点:欢迎来访 1.浏览器加载   (1)同步加载     在网页中,浏览器加载js文件的方式是通过<script>标签。如下所示: //内嵌脚本 <scripttype="text/javacript"> //codehere! </script> //加载外部脚本 <scripttype="text/javascriptsrc="path/demo.js"></script>复制     <script>标签很方便,只要加入后,浏览器便可读取并运行,但是在读取的时候,浏览器是按照<script>标签的出现顺序,读取Javascript文件,然后立即运行,导致在多个文件相互依赖的情况下,依赖性最小的文件必须放在最前面,依赖性最大的必须放在最后面,否则代码会报错,这一点,想必大家在使用bootstrap的时候都深有体会。另一方面,浏览器采用同步模式加载<script>标签,也就是说

  • ReactNative: 使用Geolocation的API获取位置信息

    一、简介 LBS,基于位置的服务是很多APP必不可少的功能,根据获取的用户当前的位置,快速地提供给用户附近的资源【吃穿住行】。目前国内比较著名的地图服务提供商有百度地图、高德地图、以及腾讯地图等等。LBS最基础的功能就是位置的获取,ReactNative中提供了Geolocation这个API来进行定位,使用起来比较简单。使用react-nativeinit创建的项目默认已经启动了这个服务。   二、API Geolocation在ReactNative中已经进行了封装,当然用LBS这个服务之前,要获取用户的位置隐私必须得到权限允许,在Info.plis中配置NSLocationWhenInUseUsageDescription、NSLocationAlwaysUsageDescription、NSLocationAlwaysAndWhenInUseUsageDescription,Geolocation的常用的方法如下: //参数类型 typeGeoOptions={ timeout:number,//超时时长,单位为秒,若超时,触发失败回调函数 maximumAge:

  • 如何应对“改变现状”的失败&quot;

    参加工作后,利用闲暇时间看了一些书,发现以上的场景可以通过心理学,神经生物学等相关的知识来解析,同时也可以利用这些知识来进行一些改进。那么下文就来尝试通过心理学来解析这个场景,同时提出一些改进方法。 在这之前,我们需要补充一些背景知识。 1.大脑的“渴望”会驱使我们做使我们高兴的事 试想一个场景:此时你是一名大学生,在经历假期的时候,你发现自己先前在学校太堕落了(通宵游戏,狂刷美剧,逃课),平常花很少时间在学业上,以致于在期末考试的时候不得不疯狂突击,虽然如此,但还是把高数挂了。所以在假期的时候要立志改变,在新学期要好好学习,给自己定下了期末考试奖学金的目标。终于,新学期开始了,要迎接自己的新大学生活了。 为了要达到期末奖学金的目标,你知道自己需要每天好好学习了,起码得去自习室上晚自习吧。在吃晚饭的时候,下定决心今晚要好好学习高数(哪里跌倒,哪里爬起)。吃完晚饭回到宿舍的时候,习惯性地开了下电脑,发现自己追的美剧有了更新,得看啊,结果看完发现也快十点了,该洗洗睡了。这个时候你很内疚,觉得自己太没有自制力了,于是决定明天清早5点半起来看书学习... 以上场景仍历历在目,这是我大学生活中的

  • 全排列递归算法

    转自:https://blog.csdn.net/xiazdong/article/details/7986015   我们可以将这个排列问题画成图形表示,即排列枚举树,比如下图为{1,2,3}的排列枚举树:   从第一个数开始枚举确认,接着进入下一个递归即枚举下一个数,直到最后一个数被确认到达出口。 如确认了第一个数1,则确认第二个数为2,接着确认3,一次递归结束输出123 返回到上一层第二层,确认第二个数的枚举{2,3}只有3没被枚举,确认第二个数为3,接着第三个数为2,输出132; 返回第二层,无可枚举数,再返回上一层即确认第一个数{1,2,3},确认第一个数为2,重复上述,确认第二个数为{1,3},枚举。。。。 直到所有数都枚举完,则递归结束,全排列完成。 核心代码: voidperm(intarr[],intbegin,intend){   if(end==begin)  { //一到递归的出口就输出数组,此数组为全排列     for(inti=0;i<=end;i++)    {       printf("%d",ar

  • linux库环境变量

    LIBRARY_PATH编译时链接 LD_LIBRARY_PATH运行时链接 多个目录时用冒号分隔

相关推荐

推荐阅读