vue将对象新增的属性添加到检测序列的方法


Posted in Javascript onFebruary 24, 2018

vue中将对象中新增的属性增加到检测序列中

deepCopy(o1, o2) { // 将o2的内容拷贝给data中的o1
   var key, i
   if (o2 instanceof Array) {
    for (i = 0; i < o2.length; i++) {
     if (o2[i] instanceof Array) {
      this.$set(o1, i, [])
      this.deepCopy(o1[i], o2[i])
     }
     else if (o2[i] instanceof Object) {
      this.$set(o1, i, {})
      this.deepCopy(o1[i], o2[i])
     }
     else {
      this.$set(o1, i, o2[i])
     }
    }
   }
   else if (o2 instanceof Object) {
    for (key in o2) {
     if (o2[key] instanceof Array) {
      this.$set(o1, key, [])
      this.deepCopy(o1[key], o2[key])
     }
     else if (o2[key] instanceof Object) {
      this.$set(o1, key, {})
      this.deepCopy(o1[key], o2[key])
     }
     else {
      this.$set(o1, key, o2[key])
     }
    }
   }
   else {
    o1 = o2
   }
}

由于 Vue 不允许动态添加根级响应式属性,所以你必须在初始化实例前声明根级响应式属性,哪怕只是一个空值

如果一个属性没有事先声明,后面再增加,他不能检测到变化,对于一些固定的结构,是可以检测到变化的。比如我知道一个obj里面必然有key1、key2属性,我可以事先初始化。如果这些东西是动态的,我没法事先声明。后面再增加,vue没法检测到变化了。

这时将你已经在data中声明的变量和你要赋给这个变量的值作为参数传进该函数就行了

以上这篇vue将对象新增的属性添加到检测序列的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery ajax return没有返回值的解决方法
Oct 20 Javascript
js 如何实现对数据库的增删改查
Nov 23 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
js函数调用的方式
May 06 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 Javascript
Vue2实现组件props双向绑定
Dec 02 Javascript
js生成word中图片处理方法
Jan 06 Javascript
解析vue路由异步组件和懒加载案例
Jun 08 Javascript
用Node提供静态文件服务的方法
Jul 06 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 #jQuery
vue cli webpack中使用sass的方法
Feb 24 #Javascript
vue-cli常用设置总结
Feb 24 #Javascript
JS处理一些简单计算题
Feb 24 #Javascript
jQuery 改变P标签文本值方法
Feb 24 #jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 #jQuery
通过js动态创建标签,并设置属性方法
Feb 24 #Javascript
You might like
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
php中关于换行的实例写法
2019/09/26 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
python实现单链表的方法示例
2019/09/03 Python
Python项目跨域问题解决方案
2020/06/22 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
大一新生军训时的自我评价分享
2013/12/05 职场文书
应届行政管理专业个人自我评价
2013/12/28 职场文书
创业计划书怎样才能打动风投
2014/01/01 职场文书
文案策划求职信
2014/04/14 职场文书
厨房管理计划书
2014/04/27 职场文书
专家推荐信范文
2015/03/26 职场文书
商务宴会祝酒词
2015/08/11 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
python装饰器代码解析
2022/03/23 Python
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电