使用Vue.$set()或者Object.assign()修改对象新增响应式属性的方法

目录
  • Vue.$set()
  • Vue.$set()源码
  • Object.assign()

首先建议先读读Vue官方文档深入响应式原理的介绍,对这一块你的理解会加深很多
深入响应式原理

vue代码中,只要在data对象里定义的对象,赋值后,任意一个属性值发生变化视图都会实时变化

比如下面在data定义了obj对象,mounted里赋值后,(也可以在其他地方赋值)只要obj.a或者obj.b的值改变了,视图会跟着变化

data() {
	return {
		obj: {}
	}
},
mounted: {
	this.obj = {a:1, b: 2} // 改变this.obj.a this.obj.c的值视图会更新
	this.obj.c = 3 // 改变this.obj.c的值  视图不会更新
	Object.assign(this.obj, {d: 4}) // 改变this.obj.c的值 视图不会更新
	this.$set(this.obj, 'e', 5) // 改百年this.obj.e时 视图会更新
	console.log('obj' + this.obj)
}

但是我们在obj对象上新增的属性变化时,值会变化,但是视图不会实时变化
比如obj.c或者obj.d变化时,值虽然会变,但是视图不会跟着变

Vue.$set()

Vue官方文档

使用Vue.$set()方法,既可以新增属性,又可以触发视图更新,比如obj.e改变时,视图会相应改变

打印出的obj,可以看出,新增的属性只有通过this.set()的obj.e属性有get和set方法的,而新增的obj.c和obj.d没有

根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。

当我们把一个JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty把这些属性全部转为 getter/setter。

Vue.$set()源码

Vue2.6.12版本的源码

/**
 * Set a property on an object. Adds the new property and
 * triggers change notification if the property doesn't
 * already exist.
 */
export function set (target: Array<any> | Object, key: any, val: any): any {
  if (process.env.NODE_ENV !== 'production' &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
  }
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    target.splice(key, 1, val)
    return val
  }
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== 'production' && warn(
      'Avoid adding reactive properties to a Vue instance or its root $data ' +
      'at runtime - declare it upfront in the data option.'
    )
    return val
  }
  if (!ob) {
    target[key] = val
    return val
  }
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}
/**
 * Define a reactive property on an Object.
 */
export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: ?Function,
  shallow?: boolean
) {
  const dep = new Dep()

  const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {
    return
  }

  // cater for pre-defined getter/setters
  const getter = property && property.get
  const setter = property && property.set
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key]
  }

  let childOb = !shallow && observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      if (Dep.target) {
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      // #7981: for accessor properties without setter
      if (getter && !setter) return
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal)
      dep.notify()
    }
  })
}

Object.assign()

给data定义的对象新增属性,同时又要视图实时更新,除了用Vue.$set()方法,也可以通过Object.assign()实现

data() {
	return {
		obj: {}
	}
},
mounted: {
	this.obj = { a: 1, b: 2 }
    this.obj.c = 3
    Object.assign(this.obj, { d: 4 })
    // this.$set(this.obj, 'e', 5)

	// 下面这一行代码才触发了视图更新
    this.obj = Object.assign({}, this.obj, {e: 5})
    console.log("obj", this.obj)
}

以上的代码等同于

data() {
	return {
		obj: {}
	}
},
mounted: {
	this.obj = { a: 1, b: 2, c: 3, d: 4, e: 5 }
}

$set()方法不生效时,改用Object.assign()试试

今天一美女同事使用this.$set()去改变一个传入组件的对象(没有直接定义在data对象中,通过mixins选项做相关操作,能够通过this.去获取),没有触发视图更新

而改用Object.assign()去给对象重新赋值时,会触发视图更新

通过重新给对象赋值,来使视图更新;
使用Object.assign()新增,或者改变原有对象,

// 起作用的是给对象重新赋值
this.obj = Object.assign({}, this.obj, {e: 5})

到此这篇关于使用Vue.$set()或者Object.assign()修改对象新增响应式属性的文章就介绍到这了,更多相关Vue.$set()响应式属性内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 解决vue中数据更新视图不更新问题this.$set()方法

    目录 vue数据更新视图不更新 解决问题 vue数据不更新的原因(数据更改了,但是视图没有更新) 解决办法 具体流程如下 数组更新检测 注意事项 对象更改检测注意事项 vue数据更新视图不更新 1.data中有对象obj :{name:'远航',age:18} 2.此时新增phone this.obj.phone = '123456' 再次更新 用this.obj.phone = '654321' 视图未更新  用this.$set(this.obj,"phone", "65

  • Vue中使用this.$set()如何新增数据,更新视图

    目录 使用this.$set()新增数据,更新视图 描述 简单的讲就是 说说vue.set() (this.$set)用法 使用this.$set()新增数据,更新视图 描述 如果在实例创建之后添加新的属性到实例上,它不会触发视图更新 简单的讲就是 在页面渲染完成之后,对data里的某个数组或对象进行新增删除属性操作是监听不到的,视图不会更新 <div id='app'>     <el-button @click="setinfo">新增属性</el-b

  • Vue.set() this.$set()引发的视图更新思考及注意事项

    引文 vue文档列表渲染中有条注意事项: 这里提到的两种情况实际改变了数据但是没有触发视图更新. 由此引出Vue.set(),先上文档API:   this.$set()和Vue.set()本质方法一样,前者可以用在methods中使用. set方法调用时,可以触发页面全部重新渲染. 比如在vue中有个data数组arr: //arr=[1,2,3] arr[1]='b' console.log(arr) // [1,2,3] Vue.set(arr,2,'c') console.log(arr

  • Vue2.0 $set()的正确使用详解

    vue2.0 给data对象新增属性,并触发视图更新 如下代码,给 student对象新增 age 属性 data () { return { student: { name: '', sex: '' } } } 众所周知,直接给student赋值操作,虽然可以新增属性,但是不会触发视图更新 mounted () { this.student.age = 24 } 原因是:受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除.因为 Vue.js 在初始化实例时将属性转为 getter

  • Vue.set()和this.$set()使用和区别

    在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新. 如下代码,给 student对象新增 age 属性 data () { return { student: { name: '', sex: '' } } } mounted () { // --钩子函数,实例挂载之后 this.student.age = 24

  • 使用Vue.$set()或者Object.assign()修改对象新增响应式属性的方法

    目录 Vue.$set() Vue.$set()源码 Object.assign() 首先建议先读读Vue官方文档深入响应式原理的介绍,对这一块你的理解会加深很多深入响应式原理 vue代码中,只要在data对象里定义的对象,赋值后,任意一个属性值发生变化,视图都会实时变化 比如下面在data定义了obj对象,mounted里赋值后,(也可以在其他地方赋值)只要obj.a或者obj.b的值改变了,视图会跟着变化 data() { return { obj: {} } }, mounted: { t

  • C#实现获取不同对象中名称相同属性的方法

    本文实例讲述了C#实现获取不同对象中名称相同属性的方法.分享给大家供大家参考.具体如下: [两个类] class demo1 { public string Name { get; set; } public int Age { get; set; } } class demo2 { public string Name { get; set; } public string Address { get; set; } } [初始化数据] List<object> list = new Lis

  • VBScript提交表单提示-对象不支持此属性或方法

    今天因需要客户端得用VBScript对表单进行处理.提交,然而在提交表单时老是出错,错误信息为:"对象不支持此属性或方法".后查资料得知: 引用内容 除了表单提交按钮,页面中不允许再有一个表单项名字为submit 改下名字,果然没问题了,汗. 以前用Javascript都没碰过这样的问题:Dreamweaver插入按钮时名字默认的都是Submit[n],以后用VBScript得注意改名!

  • 判断JS对象是否拥有某属性的方法推荐

    两种方式,但稍有区别 1,in 运算符 var obj = {name:'jack'}; alert('name' in obj); // --> true alert('toString' in obj); // --> true 可看到无论是name,还是原形链上的toString,都能检测到返回true. 2,hasOwnProperty 方法 var obj = {name:'jack'}; obj.hasOwnProperty('name'); // --> true obj.

  • 对象不支持此属性或方法: Session.CodePage = 936 解决方法

    今天调试网站时在后台出现这样的错误,"Microsoft VBScript 运行时错误 '800a01b6' 对象不支持此属性或方法: 'Session.CodePage'" 在百度搜索查看到的答案又不是很全,大多都是含糊不清的.后来我自己研究了一下,原来还有个比较快的方法! 如果你出现以下信息: Microsoft VBScript 运行时错误 '800a01b6' 对象不支持此属性或方法: 'Session.CodePage' \include\sysCode.asp, line

  • 对象不支持indexOf属性或方法的解决方法(必看)

    var divarr = ["a","b","c","d"]; 判断divarr 数组中是否存在a divarr.indexOf("a")==-1    在ie8下会提示对象不支持indexOf属性或方法 解决办法: 用jquery里的$.inArray替代indexOf $.inArray("a", divarr)==-1 以上这篇对象不支持indexOf属性或方法的解决方法(必看)就

  • JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解

    废话不多说了,直奔主题,你,具体代码如下所示: <script> //----------------for用来遍历数组对象-- var i,myArr = [1,2,3]; for (var i = 0; i < myArr.length; i++) { console.log(i+":"+myArr[i]); }; //---------for-in 用来遍历非数组对象 var man ={hands:2,legs:2,heads:1}; //为所有的对象添加cl

  • js动态修改input输入框的type属性(实现方法解析)

    需要实现的效果:一个输入框,当输入框未获得焦点的时候,value 值为 "密码":当输入框失去焦点的时候,输入内容显示为"*****" <input name="password" type="text" id="showPwd" tabindex="2″ class="input" value="密码" /> 我们很直接会想到下面的js $(&

  • "PageMethods未定义"或"对象不支持此属性或方法"解决方法分享

    1.检查web.config中是否加入对于asp.net ajax的支持的代码 2.检查ScriptManager中是否设置了EnableMethods=true 3.检查后台cs中是否引用的命名空间System.Web.Services或者加入了[System.Web.Services.WebMethod] 4.后台函数必须是public static 5. 还有一种情况就是,通常,有些人在复制这个aspx页面时,经常是连同,<%@ Page Language="C#" Aut

  • 网页运行时提示对象不支持abigimage属性或方法

    在一个网页中用了一个js插件, js文件引用的没有错,代码也和demo差不多, 但是运行时ie的调试工具报了一个错: 解决方案: jquery文件冲突,发现原来自己引过一个 <script src="js/jquery-1.11.0.min.js"></script> , 这里又引入了一个 <script type="text/javascript" src="js/jquery-2.0.3.min.js">&

随机推荐