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 相关文章推荐
JavaScript 异步调用框架 (Part 2 - 用例设计)
Aug 03 Javascript
jquery 操作iframe的几种方法总结
Dec 13 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 Javascript
原生JS实现的碰撞检测功能示例
May 18 Javascript
angularjs使用div模拟textarea文本框的方法
Oct 02 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
微信小程序上传文件到阿里OSS教程
May 20 Javascript
VUE中使用HTTP库Axios方法详解
Feb 05 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
Nov 03 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 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无限分类使用concat如何实现
2015/11/05 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
JavaScript 学习初步 入门教程
2010/03/25 Javascript
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
2017/07/05 Javascript
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
python多线程与多进程及其区别详解
2019/08/08 Python
使用Tkinter制作信息提示框
2020/02/18 Python
详解HTML5中的标签
2015/06/19 HTML / CSS
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
法国珠宝店:CLEOR
2017/01/29 全球购物
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
外贸销售员求职的自我评价
2013/11/23 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
地质灾害防治方案
2014/05/14 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
2015年话务员工作总结
2015/04/29 职场文书
教师节表彰会主持词
2015/07/06 职场文书