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 继承机制实例
Aug 12 Javascript
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
分享一个原生的JavaScript拖动方法
Sep 25 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
vue实现购物车结算功能
Jun 18 Javascript
javascript实现移动端红包雨页面
Jun 23 Javascript
Javascript如何递归遍历本地文件夹
Aug 06 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函数
2006/12/06 PHP
PHP的SQL注入过程分析
2012/01/06 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
IE中createElement需要注意的一个问题
2010/07/13 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
[52:08]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第一局
2016/03/05 DOTA
SQLite3中文编码 Python的实现
2017/01/11 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
PyTorch的torch.cat用法
2020/06/28 Python
python开发入门——列表生成式
2020/09/03 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
业务主管岗位职责
2013/11/20 职场文书
合同协议书格式
2014/04/18 职场文书
实验室的标语
2014/06/20 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
Python+Tkinter制作专属图形化界面
2022/04/01 Python