vue响应式
时间:2021-10-11
本文章向大家介绍vue响应式,主要包括vue响应式使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、delete和Vue.delete删除数组
delete
- 只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
- 界面不会改变
this.a=[1,2,3,4]
delete this.a[1]
console.log(this.a)
//输出:(4) [1, empty, 3, 4, __ob__: Observer]
Vue.delete
-
this.$delete(),直接删除了数组,改变了数组的键值。
-
响应式,界面改变
this.b=[1,2,3,4]
this.$delete(this.b,0)
//Vue.delete(this.b,0)
console.log(this.b)
//输出:(4) [2, 3, 4, __ob__: Observer]
二、delete和Vue.delete删除对象
delete
- 直接删除键值
- 界面不会改变
this.c={name:'hhh',age:18}
delete this.c.age;
console.log(this.c);
//输出:{name: "hhh"}
Vue.delete
-
this.$delete(),直接删除了键值。
-
响应式,界面改变
this.d={name:'hhh',age:18}
this.$delete(this.d,'age');
console.log(this.d);
//输出:{name: "hhh"}
三、.属性名
和Vue.set添加元素
.属性名
- 界面不会改变
this.c={name:'hhh',age:18}
this.c.height=188;//页面不会改变
console.log(this.c);
//输出:{name:'hhh',age:18,height:188}
//发现一个小问题:.和delete,如果当前操作或操作后有个响应式一起,界面也会改变,如this.$delete或this.$set
Vue.set
-
this.$set()
-
响应式,界面改变
this.d={name:'hhh',age:18}
this.$set(this.d,'height',178)
console.log(this.d);
//输出:{name:'hhh',age:18,height:178}
四、响应式添加元素
- Vue.set,响应式添加,界面会发生变化
- 用新对象给旧对象复值。新对象=Object.assign({},旧对象,新增对象);
this.info={name:'hhh',age:18}
//添加新
this.info=Object.assign({},this.info,{address:'福州'})
作者:黄哈哈。
原文链接:https://www.cnblogs.com/jiajia-hjj/p/15393107.html
本博客大多为学习笔记或读书笔记,本文如对您有帮助,还请多推荐下此文,如有错误欢迎指正。
原文地址:https://www.cnblogs.com/jiajia-hjj/p/15393107.html
- zookeeper学习系列:二、api实践
- Spring Cloud构建微服务架构:分布式服务跟踪(整合logstash)【Dalston版】
- Spring Cloud构建微服务架构:分布式服务跟踪(整合zipkin)【Dalston版】
- 困扰我多年的Connection reset问题
- scala学习笔记
- jersey处理支付宝异步回调通知的问题:java.lang.IllegalArgumentException: Error parsing media type 'application/x-www
- 使用 Java Service Wrapper 启动java后台进程服务
- PHP码农在Golang压力下的生存之道-PHP性能优化实践
- golang使用 mongo
- CoreOS Linux引入了Kubernetes kubelet
- gwt之mvc4g
- 来自1000多个项目的10大JavaScript错误浅析
- 编程思想 之「多态、初始化顺序、协变返回类型」
- 使用Golang语言执行shell文件
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python 学习笔记(9)——Python 正则表达式
- 万能的BeanPostProcessor是如何让spring无限扩展的?
- spring解决循环依赖为什么要用三级缓存?
- 深入剖析ThreadLocal
- spring事务的这10种坑,你稍不注意可能就会踩中!!!
- 面试前看了这篇spring事务的文章,让我多要了2k的工资
- 面试时被问到单例模式,怎么回答才能让面试官眼前一亮?
- 老司机手把手教你编写自己的springboot starter
- 实战|如何消除又臭又长的if...else判断更优雅的编程?
- 硬核 | 使用spring cache让我的接口性能瞬间提升了100倍
- 11张图让你彻底明白jdk1.7 hashmap的死循环是如何产生的
- 基于qiankun落地部署微前端爬”坑“记
- springboot面试杀手锏-自动配置原理
- 树酱的前端知识体系构建(上)
- 这8种保证线程安全的技术你都知道吗?