vue检测对象和数组的变化分析


Posted in Javascript onJune 30, 2018

在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。可以直接在子组件修改对象或数组,但是并不会数据改变就会引起变化。

检测对象变化

1、不能检测到对象属性的添加或删除

var vm = new Vue({
 data:{
   data111:{
     a = 1
   }
 }
})

data111.a = 2;//这个可以引起变化

但data111.b = 2;和vm.b = 2这个不能检测到变化

需要用

Vue.set(object, key, value)

比如$set(data111, b, 2);

或者:

$set(key,value)

比如vm.$set(‘b', 2);

检测数组变化

下面两种情况不能检测到变化:

1、直接通过索引设置元素,如arr[0]=12;

2、直接修改数组的长度,如vm.arr.length

Vue.set( object, key, value )

用法:

this.$set(this.arr,0,12)

Javascript 相关文章推荐
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
JavaScript中的eval()函数详解
Aug 22 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
AngularJs ng-route路由详解及实例代码
Sep 14 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
JavaScript构建自己的对象示例
Nov 29 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 Javascript
webpack的pitching loader详解
Sep 23 Javascript
React中的Context应用场景分析
Jun 11 Javascript
浅析vue.js数组的变异方法
Jun 30 #Javascript
详解vue添加删除元素的方法
Jun 30 #Javascript
vue.js删除列表中的一行
Jun 30 #Javascript
vue v-model动态生成详解
Jun 30 #Javascript
vue-router+nginx 非根路径配置方法
Jun 30 #Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 #Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 #Javascript
You might like
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
php格式化时间戳
2016/12/17 PHP
php7性能提升的原因详解
2019/10/13 PHP
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
Python rstrip()方法实例详解
2018/11/11 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
如何基于Python实现数字类型转换
2020/02/07 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
python如何控制进程或者线程的个数
2020/10/16 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
国际花店:Pickup Flowers
2020/04/10 全球购物
经贸日语毕业生自荐信
2013/11/03 职场文书
会计系中文个人求职信
2013/12/24 职场文书
社区党总支书记先进事迹材料
2014/01/24 职场文书
《青海高原一株柳》教学反思
2014/04/25 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
Python实现Hash算法
2022/03/18 Python