vue 组件属性监听_vuejs组件内的对象属性监听问题

跟数据类型是有关的。

当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。

但是不是所有的变动都可以通过set/get捕捉到,比如一个数组

let a = [1, 2, 3]

a[0] = 2 // 这个就是没法通过set/get捕捉到的变动,所以不能触发vue的响应式更新

this.$set(a, 0 ,2) //这样就可以

a.splice(0, 1, 2) //这样也可以

又比如一个对象

let a = {

name : 'gg'

}

a.name = 'ok' // 会触发dom更新

a.age = 18 //不会触发dom更新,因为在vue‘改造’a对象的时候,不存在age属性,显然没办法给它添加getter/setter

因此当你对数组进行操作时,可以使用vue提供的8个数组变异方法来保证触发响应式更新:

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

当你需要给一个对象添加属性时,使用 Vue.set(vm.someObject, 'b', 2) 或者 this.$set(this.someObject,'b',2)

当然,构造新的对象/数组然后重新赋值也是可以的

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/540106.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Part 2: Containers

要求 安装了1.13或者更高版本的Docker阅读了Part1中的定位(我没写)介绍 是时候用Docker构建一个app了。我们会从构建这样一个app的最底层开始,容器——我们这节所介绍的内容。在这层之上是服务,服务定义了容器们的在生产中的行为&…

(论文)WS-DAN (弱监督数据增强)

背景 近期在做外卖分类的项目,外卖分类属于细粒度图像分类,在分类的过程中要从图片的行人中和非机动车中区分出各类外卖(主要是美团、饿了吗)。刚好近期发现了一片关于细粒度图像分类较新的论文(See Better Before Lo…

罗马音平假名片假名转换器_关于五十音你所要知道的一切!文末附日网高清字帖...

今天开始,木子小花日本语教室将开始同时更新日语文法系列文章 和 日语真题详解系列文章,从五十音图的记忆方法到日语助词的用法整理,从N5的简单句子构成到N1复杂文法的接续记忆方法,力求做出全知乎(小声:全…

django的web开发笔记1(智能诊断系统数据概览记录)

接于上一篇,这一篇主要记录如何链接mysql数据库以及从数据库中调用数据信息到页面,同时包含百度地图api的一些使用。 其中包括模块,echert图表绘制数据调用,百度地图数据信息调用以及一些单机效果,页面数据调用等。 1…

Spring中应用反射机制浅析

我们知道,Spring中大量使用了反射机制,那么究竟是什么地方使用了呢?就从源头说起吧。 一 反射源头Class类 对类的概念我们已经非常熟悉了。比如可以有Student这个类,Person这个类。但是我们要知道,有一个叫Class的类,…

ios nslog 例子_iOS开发-使用宏自定义输出(NSLog)

前言:1)输出日志是会大量损耗系统性能2)输出的信息很容易会被截取到,导致信息不安全。所以我们会在发行版(Release)取消所有的Log。如果一行一行地去注释掉Log,显然不是一个明确的选择。因此我们可以使用宏去自定义Log输出。最简单的一个例子…

python小技巧积累--题库(持续更新)

介绍 作为一名程序员,除了需要具备解决问题的思路以外,代码的质量和简洁性也很关键。 python内置库中就有很多简洁而又优雅的操作,这里的知识都来源于网络积累, 闲暇时整理下来方便温故。目录 >选择正确的内置功能 使用enum…

提高SQL执行性能方案:如何让你的SQL运行得更快

---- 人们在使用SQL时往往会陷入一个误区,即太关注于所得的结果是否正确,而忽略了不同的实现方法之间可能存在的性能差异,这种性能差异在大型的或是复杂的数据库环境中(如联机事务处理OLTP或决策支持系统DSS)中表现得尤…

休眠后gpio状态_STM32中GPIO的8种工作模式总结

STM32中GPIO的8种工作模式总结一、推挽输出:可以输出高、低电平,连接数字器件;推挽结构一般是指两个三极管分别受两个互补信号的控制,总是在一个三极管导通的时候另一个截止。高低电平由IC的电源决定。形象点解释:推挽&#xff0c…

Ubuntu16.04 下 tensorRT安装

环境准备 主要是根据工程环境需要,参考trt文档安装trt 1.查看trt适配情况 :链接跳转,注意,不同版本的trt有不同版本的文档,请以最新文档为准。 2.根据自己系统情况下载相关包 因为我自己拉的docker镜像是ubuntu16.04…

左右xcode的重构选项的一些理解

Rename(重命名):对标示符进行重命名,以获得更好的代码可读性,这些标示符包含类,方法或者函数的名称. Extract(抽取):将你在XCode种选择的代码抽取到一个新的方法或函数中. Create SuperClass(创建父类):为Xcode中当前所选的类定义父类 Move Up(上移):将所选择的方法,属性,或实例…

window 如何查看tomcat 实时日志_如何处理生产环境Tomcat的catalina.out日志?

前语:不要为了读文章而读文章,一定要带着问题来读文章,勤思考。作者:jmcui 来源:http://1t.click/x4q# 前言随着每天业务的增长,Tomcat 的catalina.out日志 变得越来越大,占用磁盘空间不说。要…

zabbix的agent端的主动模式关键三个参数

如多主机超过300和队列内容过多,就采用主动模式. [rootweb03 zabbix]# egrep -v "^#|^$" zabbix_agentd.conf PidFile/var/run/zabbix/zabbix_agentd.pid LogFile/var/log/zabbix/zabbix_agentd.log LogFileSize0 StartAgents0 ServerActive172.16.1.8 Hostnameweb03…

opencv 绘制坐标曲线_OpenCV手工实现灰度及RGB直方图

#include #include#include#include#include#include#include#include#includeusing namespacecv;using namespacestd;//单通道图片直方图绘制void drawHist(vectornums){Mat hist Mat::zeros(600, 800, CV_8UC3);auto Max max_element(nums.begin(), nums.end());//max迭代器类…

onnx 测试_用于ONNX的TensorRT后端

用于ONNX的TensorRT后端解析ONNX模型以使用TensorRT执行。另请参阅TensorRT文档。有关最近更改的列表,请参见changelog。支持的TensorRT版本Master分支上的开发适用于具有完整维度和动态架构shape支持的TensorRT 7.2.1的最新版本。对于TensorRT的早期版本&#xff0…

paddlepaddle测试安装_百度paddlepaddle深度学习7日入门-CV疫情特辑心得

正值疫情严重之日,作为一名研究生被迫待在家里学习,手头的科研项目也严重受挫。。。偶然间,看到微信公众号发布这门课,马上报名,入坑!!!瞬间疫情其间有学习的目标了。。该课程学习依…

apache目录 vscode_VsCode搭建Java开发环境(Spring Boot项目创建、运行、调试)

VsCode搭建Java开发环境(Spring Boot项目创建、运行、调试)安装如下两个主要扩展即可,这两个扩展已关联java项目开发主要使用的maven、springboot等所需要的扩展。开始步骤:在 Visual Studio Code 中打开扩展视图(CtrlShiftX)。输入“java”搜索商店扩展…

android dp转px的公式_Android特效专辑——自定义不一样的Toast

大家都知道,Android的控件有时候很难满足我们的需求,所以我们需要自定义View。自定义的方式很多,有继承原生控件也有直接自定义View的,今天写的是自定义的Toast,当然,这个不是复写Toast,是换一种表达形式&a…

code iban 是有什么组成_深入浅出Zookeeper(四):客户端的请求在服务器中经历了什么...

作者 泊浮目 沃趣科技高级研发工程师出品 沃趣科技1. 前言当我们向zk发出一个数据更新请求时,这个请求的处理流程是什么样的?zk又是使用了什么共识算法来保证一致性呢?带着这些问题,我们进入今天的正文。2. 设计模式&#xff1…

Centos7: 配置IO调度

今天有同事问我个问题:“CentOS7如何修改IO默认的调度”,我这里简单整理下如何调整的方法: 1、查看CentOS7下IO支持的调度 1234[rootkvm02 ~]# dmesg | grep -i scheduler [ 16.900459] io scheduler noop registered[ 16.900473] io sch…