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 相关文章推荐
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
基于JQuery框架的AJAX实例代码
Nov 03 Javascript
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 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
php SQL之where语句生成器
2009/03/24 PHP
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
select组合框option的捕捉实例代码
2008/09/30 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
获取非最后一列td值并将title设为该值的方法
2013/10/30 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
2015/10/28 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
js中作用域的实例解析
2017/03/16 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
2017/08/30 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
使用JS动态显示文本
2017/09/09 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
vuex的使用步骤
2021/01/06 Vue.js
Python 列表理解及使用方法
2017/10/27 Python
python监控键盘输入实例代码
2018/02/09 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
基于keras中的回调函数用法说明
2020/06/17 Python
python dict如何定义
2020/09/02 Python
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
工程业务员工作职责
2013/12/07 职场文书
化工专业自荐书
2014/06/16 职场文书
社会实践单位意见
2015/06/05 职场文书
承诺书应该怎么写?
2019/09/10 职场文书