vue项目统一响应_vue中使用$set实现深入响应式原理
前言：其实使用vue的都知道，vue声明在data中的属性都是响应式的，也就是，我们在修改data中的属性时，一般页面都能实时更新。但是由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。比如我们对data中的对象属性和数组属性进行一些修改时，无法响应式更新渲染到页面，因此vue提供了$set这个API来解决这个限制。
一 改变数组使用$set:
其实根据vue的官网，明确说明了下面两种改变数组的操作时无法做到响应式更新页面的
也许此时你还会不信，就偏偏用上边这两种试一下，看看是否真的无法更新页面信息，当然我也测过：
因为，之前第一次使用vue开发项目时碰到过一个奇葩的问题，我就是直接使用上边 '1' 的这种方法改变数组，奇怪的是本地浏览器竟然也更新了，刚开始以为是缓存什么的问题，但是重启项目，清空浏览器缓存，还是一样能更新。最后打了个包放到测试环境看了下，确实无法渲染使用这种方式改变数组，仔细看了下官网，还是按照它这规范操作数组，问题解决。
1. 改变数组的错误样式：
a.下边使用上面不提倡的 '1'这种方法改变数组：
结果：单单看打印出来的数组信息，list对应下标的元素是改变了，但是页面确实没有响应式更新。
b. 看下第 '2' 中不提倡的方式：
一样，打印出来的数组长度是变化了，但是页面显示的长度还是最初数组的长度
2. 使用vue约定的方式操作数组：
二 使用$set操作对象：
1. 使用vue约定的方式操作对象：
a. 往对象中新增一个属性
b. 往对象新增多个属性：
2. 不正确的方式操作对象：
看下无法更新对象的写法(以添加一个属性为例)：
到这里，因为javaScript的限制，Vue 不能检测数组和对象的变化的问题，通过提供的$setAPI得以解决了。
3. 非对象或数组的单个属性：
$set是vue专门针对对象和数组的问题的，关于单纯的属性，vue官方是建议在开始时根据需要直接声明在data中，不然直接把一个data中没声明的属性，在某个dom中渲染使用或者直接在某个想选中对它进行操作，控制台肯定会报：
Property or method "xxx" is not defined on the instance but referenced during render.
vue项目统一响应_vue中使用$set实现深入响应式原理相关推荐
- 解决vue项目在ie浏览器中无法显示的问题，兼容低版本浏览器问题
解决vue项目在ie浏览器中无法显示的问题,兼容低版本浏览器问题 1.在csdn中找到了一下解决方案,但与本项目略有不同 vue项目兼容ie浏览器的问题:在其他浏览器显示都是正常的,在ie11下显示空 ...
- vue项目：this.function()中关于：this指针失效的问题
vue项目:this.function()中关于:this指针失效的问题 参考代码:第二种 案例代码 · 代码解说 · 如下: this.nullArrImg= true;//缺省图显示,表示数据为空 ...
- vue项目统一响应_Vue响应式原理及总结
Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty 中的访问器属性中的 get 和 set 方法,data 中声明的属性都被添加了访问器属性,当读取 ...
- vue修改meta值_vue中动态设置meta标签和title标签的方法
vue中动态设置meta标签和title标签的方法 因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 ...
- vue项目 在style标签中引入css,less,sass的方法
vue项目 style标签引入 less sass less和sass需要安装相应的依赖 package.json 中加上 并再次npm install 重启项目 "less": ...
- vue 用户名重复验证_Vue中的验证登录状态
Vue项目中实现用户登录及token验证 先说一下我的实现步骤: 使用easy-mock新建登录接口,模拟用户数据 使用axios请求登录接口,匹配账号和密码 账号密码验证后, 拿到token,将to ...
- vue 数组对象提取_vue中使用对象数组的最佳实践
前言: 在平常的开发中,经常会在vue中用到对象数组,如渲染一个小区的列表,数据结构可能如下所示: CommunityList: [ { _id: '', community_code: '', co ...
- ref获取元素 vue 删除子元素_vue中的 ref 和 $refs
相信前端开发或者后端开发都用过jquery,因为不是数据驱动,为了获取某些元素的value值,都操作过Dom元素. // 使用Jquery获取Dom元素值$("#id").text ...
- vue watch 修改滚动条_vue 中滚动条始终定位在底部的方法
滚动条定位在底部,首先想到的是,动态修改滚动条到顶部的距离等于div的高度, 代码实现: var div = document.getElementById('data-list-content') ...
最新文章
- Linux和unix中 awk 的print浅谈
- 汉诺塔--（数据结构）
- qq手机电脑消息同步_手机电脑完全同步！秒杀一切投屏软件和模拟器！
- 【react】 react 中 前后端数据的交互方式 （原生的ajax、jq的ajax、axios、fetch ）...
- 自动生成xml报文_使用python如何给xml报文进行签名 signXML库
- NativeWindow_02_DialogBoxParam_VC6
- 软件测试缺陷等级划分_软件测试的缺陷等级
- 人工智能在金融行业的应用
- 12省微生物繁殖，for循环模拟，12省，古堡算式全排列，12省鲁卡斯队列黄金比例比较,double精度12省填空题猜生日枚举,12省填空题土地测量,double12省填空题巧排扑克牌,12省汉诺塔
- [Chatter] 为甚么要学Design Pattern
- 华为云桌面客户端_华为云服务器购买及环境搭建简述
- crontab定时任务不执行，并且没有收到错误信息邮件
- 任天堂Switch便携底座方案
- 论文阅读（联邦学习）：Exploiting Shared Representations for Personalized Federated Learning
- android刷windows教程视频,蓝魔i9s安卓版刷Windows 8.1系统固件视频教程
- 自然语言处理-应用场景-文本分类：基于LSTM模型的情感分析【IMDB电影评论数据集】--（重点技术：自定义分词、文本序列化、输入数据批次化、词向量迁移使用）
- stata学习笔记（六）：数据合并
- 什么是龙格现象(Runge phenomenon)？如何避免龙格现象？
- 二、基础SpringBoot2.0.0M4项目目录讲解
- Airflow使用MsSqlHook与数据库交互