在对象上添加新属性的几种方法:

直接附代码:

法一Es6扩展运算符添加属性

法二利用语法Object.assign(target, ...sources)    target目标对象、sources源对象、返回值目标对象。

如果目标对象中的属性具有相同的键,则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。
Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]],所以它会调用相关 getter 和 setter。因此,它分配属性,而不仅仅是复制或定义新的属性。如果合并源包含getter,这可能使其不适合将新属性合并到原型中。为了将属性定义(包括其可枚举性)复制到原型,应使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。
String类型和 Symbol 类型的属性都会被拷贝。
在出现错误的情况下,例如,如果属性不可写,会引发TypeError,如果在引发错误之前添加了任何属性,则可以更改target对象。
注意,Object.assign 会跳过那些值为 null 或 undefined 的源对象。

法三Vue.set( target, key, value )返回值:设置的值;

设置对象的属性。如果对象是响应式的,确保属性被创建后也是响应式的,同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。

Object.defineProperties() 方法直接在一个对象上定义新的属性或修改现有属性,并返回该对象
语法:Object.defineProperties(obj, props)
obj-------------->在其上定义或修改属性的对象。
props--------------> 要定义其可枚举属性或修改的属性描述符的对象。对象中存在的属性描述符主要有两种:数据描述符和访问器描述符
configurable-------------->(默认为 false)true 当且仅当该属性描述符的类型可以被改变并且该属性可以从对应对象中删除。
enumerable-------------->(默认为 false)true 当且仅当在枚举相应对象上的属性时该属性显现。
value-------------->(默认为 false) 与属性关联的值。可以是任何有效的JavaScript值(数字,对象,函数等)。默认为 undefined.
writable--------------> true当且仅当与该属性相关联的值可以用assignment operator改变时。
get-------------->(默认为 undefined)作为该属性的 getter 函数,如果没有 getter 则为undefined。函数返回值将被用作属性的值。
set-------------->(默认为 undefined)作为属性的 setter 函数,如果没有 setter 则为undefined。函数将仅接受参数赋值给该属性的新值。

object方法具体详细参考这里:(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

vue ---- Object的一些常用的方法的更多相关文章

  1. Java类和数据结构中常用的方法

    1.Object类里面常用的方法: protected Object clone()创建并返回此对象的一个副本. boolean equals(Object obj)指示其他某个对象是否与此对象“相等 ...

  2. JOptionPane类提示框的一些常用的方法

    JOptionPane类提示框的一些常用的方法 XMLOracleSwing 最近在做swing程序中遇到使用消息提示框的,JOptionPane类其中封装了很多的方法. 很方便的,于是就简单的整理了 ...

  3. 常用js方法

    function dateGetter(name, size, offset, trim) { offset = offset || 0; return function (date) { var v ...

  4. 常用js方法整理common.js

    项目中常用js方法整理成了common.js var h = {}; h.get = function (url, data, ok, error) { $.ajax({ url: url, data ...

  5. .net学习之多线程、线程死锁、线程通信 生产者消费者模式、委托的简单使用、GDI(图形设计接口)常用的方法

    1.多线程简单使用(1)进程是不执行代码的,执行代码的是线程,一个进程默认有一个线程(2)线程默认情况下都是前台线程,要所有的前台线程退出以后程序才会退出,进程里默认的线程我们叫做主线程或者叫做UI线 ...

  6. 项目中常用js方法整理common.js

    抽空把项目中常用js方法整理成了common.js,都是网上搜集而来的,大家一起分享吧. var h = {}; h.get = function (url, data, ok, error) { $ ...

  7. jQuery常用工具方法

    前面的话 jQuery提供一些与元素无关的工具方法,不必选中元素,就可以直接使用这些方法.如果理解原生javascript的继承原理,那么就能理解工具方法的实质.它是定义在jQuery构造函数上的方法 ...

  8. Vue深度学习(4)-方法与事件处理器

    方法处理器 可以用 v-on 指令监听 DOM 事件: <div id="app"> <button v-on:click = "greet" ...

  9. Python魔法方法(magic method)细解几个常用魔法方法(上)

    这里只分析几个可能会常用到的魔法方法,像__new__这种不常用的,用来做元类初始化的或者是__init__这种初始化使用的 每个人都会用的就不介绍了. 其实每个魔法方法都是在对内建方法的重写,和做像 ...

随机推荐

  1. 临时表 数据在 内存 转移时间 将160秒的创建临时表时间放入定时任务 不到1秒的求和时间 hadoop 引入Hadoop 分布式计算

    SELECT SUM(pv) as pv_t  FROM 行 112247817表类型 InnoDB自动递增值 1082428327行格式  Compact索引长度 8.60 GB (9,235,93 ...

  2. [HNOI 2007] 紧急疏散

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1189 [算法] 首先 , 答案具有单调性 , 不妨二分答案” 第mid秒是否可以完成 ...

  3. 【OpenFOAM】——OpenFOAM入门算例学习

    1  明确目标——为啥费老大劲儿学习OpenFOAM 学习OpenFOAM主要出于课题需要,希望实现以下几个目标: l  [ ]学会用SnappyHexMesh生成高质量网格: l  [ ]学习使用O ...

  4. JSP+MySQL实例

    转自:https://www.yiibai.com/jsp/jsp_mysql.html 在本章中,我们将讨论如何使用JSP访问数据库(这里以MySQL数据库为例).并假设您对JDBC应用程序的工作方 ...

  5. sqlsugar的sum的用法

    通过论坛的检索 查到三篇文章是关于sum的 http://www.codeisbug.com/Ask/9/4531 http://www.codeisbug.com/Ask/14/4128 文章1:2 ...

  6. 可视化工具Grafana部署

    随着业务的越发复杂,对软件系统的要求越来越高,这意味着我们需要随时掌控系统的运行情况.因此,对系统的实时监控以及可视化展示,就成了基础架构的必须能力. Grafana官方网站 https://graf ...

  7. python 面向对象六 动态添加方法 __slots__限制动态添加方法

    一.动态添加属性 >>> class Student(object): pass >>> st = Student() >>> st.name = ...

  8. bzoj 3052: [wc2013]糖果公园【树上带修改莫队】

    参考:http://blog.csdn.net/lych_cys/article/details/50845832 把树变成dfs括号序的形式,注意这个是不包含lca的(除非lca是两点中的一个) 然 ...

  9. 徐州联赛选拔赛 - 计算IP地址值

    题目链接 思路:这是一道非常简单的题目,直接用公式计算就好了.对于IP地址a.b.c.d,转换为十进制数就是(a<<24)|(b<<16)|(c<<8)|d.唯一要 ...

  10. (9)css 链接

    本篇学习资料的主要介绍: 超链接文本的样式设计.鼠标指针效果. 1.超链接文本的样式设计 普通的网站中,所有的页面都会通过超链接相互链接在一起,这样才会形成一个有机的网站. 超链接是网页上普通的元素, ...