大战熟女丰满人妻av-荡女精品导航-岛国aaaa级午夜福利片-岛国av动作片在线观看-岛国av无码免费无禁网站-岛国大片激情做爰视频

專(zhuān)注Java教育14年 全國(guó)咨詢/投訴熱線:400-8080-105
動(dòng)力節(jié)點(diǎn)LOGO圖
始于2009,口口相傳的Java黃埔軍校
首頁(yè) hot資訊 給Vue對(duì)象增加響應(yīng)式屬性

給Vue對(duì)象增加響應(yīng)式屬性

更新時(shí)間:2022-03-16 10:57:07 來(lái)源:動(dòng)力節(jié)點(diǎn) 瀏覽3025次

Vue.$set給對(duì)象新增屬性

Vue.$set()

Object.assign()

$set()方法不生效時(shí),改用Object.assign()試試

vue代碼中,只要在data對(duì)象里定義的對(duì)象,賦值后,任意一個(gè)屬性值發(fā)生變化,視圖都會(huì)實(shí)時(shí)變化

比如下面在data定義了obj對(duì)象,mounted里賦值后,(也可以在其他地方賦值)只要obj.a或者obj.b的值改變了,視圖會(huì)跟著變化。

data() {
	return {
		obj: {}
	}
},
mounted: {
	this.obj = {a:1, b: 2} // 改變this.obj.a this.obj.c的值視圖會(huì)更新
	this.obj.c = 3 // 改變this.obj.c的值  視圖不會(huì)更新
	Object.assign(this.obj, {d: 4}) // 改變this.obj.c的值 視圖不會(huì)更新
	this.$set(this.obj, 'e', 5) // 改百年this.obj.e時(shí) 視圖會(huì)更新
	console.log('obj' + this.obj)
}

但是我們?cè)趏bj對(duì)象上新增的屬性變化時(shí),值會(huì)變化,但是視圖不會(huì)實(shí)時(shí)變化

比如obj.c或者obj.d變化時(shí),值雖然會(huì)變,但是視圖不會(huì)跟著變

Vue.$set()

使用Vue.$set()方法,既可以新增屬性,又可以觸發(fā)視圖更新,比如obj.e改變時(shí),視圖會(huì)相應(yīng)改變

打印出的obj,可以看出,新增的屬性只有通過(guò)this.set()的obj.e屬性有g(shù)et和set方法的,而新增的obj.c和obj.d沒(méi)有

根據(jù)官方文檔定義:如果在實(shí)例創(chuàng)建之后添加新的屬性到實(shí)例上,它不會(huì)觸發(fā)視圖更新。

當(dāng)我們把一個(gè)JavaScript 對(duì)象傳入 Vue 實(shí)例作為 data 選項(xiàng),Vue 將遍歷此對(duì)象所有的屬性,并使用 Object.defineProperty把這些屬性全部轉(zhuǎn)為 getter/setter。

Object.assign()

給data定義的對(duì)象新增屬性,同時(shí)又要視圖實(shí)時(shí)更新,除了用Vue.$set()方法,也可以通過(guò)Object.assign()實(shí)現(xiàn)

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)

	// 下面這一行代碼才觸發(fā)了視圖更新
    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()方法不生效時(shí),改用Object.assign()試試

使用this.$set()去改變一個(gè)傳入組件的對(duì)象(沒(méi)有直接定義在data對(duì)象中,通過(guò)mixins選項(xiàng)做相關(guān)操作,能夠通過(guò)this.去獲取),沒(méi)有觸發(fā)視圖更新

而改用Object.assign()去給對(duì)象重新賦值時(shí),會(huì)觸發(fā)視圖更新

通過(guò)重新給對(duì)象賦值,來(lái)使視圖更新;

使用Object.assign()新增,或者改變?cè)袑?duì)象,

// 起作用的是給對(duì)象重新賦值
this.obj = Object.assign({}, this.obj, {e: 5})

以上就是關(guān)于“給Vue對(duì)象增加響應(yīng)式屬性”的介紹,大家如果想了解更多相關(guān)知識(shí),不妨來(lái)關(guān)注一下動(dòng)力節(jié)點(diǎn)的Java視頻,里面的課程內(nèi)容細(xì)致全面,由淺到深,通俗易懂,適合沒(méi)有基礎(chǔ)的小伙伴學(xué)習(xí),希望對(duì)大家能夠有所幫助。

提交申請(qǐng)后,顧問(wèn)老師會(huì)電話與您溝通安排學(xué)習(xí)

免費(fèi)課程推薦 >>
技術(shù)文檔推薦 >>
主站蜘蛛池模板: 欧美日韩综合在线视频免费看 | 日日干日日干 | 欧美一区二区影院 | 一级毛片a免费播放王色 | 日日拍夜夜嗷嗷叫视频 | 欧美日韩中文亚洲v在线综合 | 国产精品欧美日韩精品 | 第一色网站 | 国产精品ⅴ视频免费观看 | 天天躁狠狠躁夜躁2021 | 中文字幕三级久久久久久 | 成人毛片18女人毛片免费96 | 亚洲欧美精品一区二区 | 国产91九色在线播放 | 亚洲乱码国产乱码精品精98 | 久久精品国产三级不卡 | 夜夜欢视频 | 亚洲综合色秘密影院秘密影院 | 青草久久久 | 午夜在线视频一区二区三区 | 国产成人精品一区二区免费 | 亚洲视频 欧美视频 | 伊人久久大香 | 波多野结衣久久精品免费播放 | 久久精品久久精品 | 久久久久久久久一级毛片 | 男人都懂www深夜免费网站 | 久久草精品 | 欧美日韩在线观看免费 | 九九网站 | 中文乱码精品一区二区三区 | 国产九九免费视频网站 | jizz中国女人 | 亚洲精品一区二区久久 | 免费v片在线观看无遮挡 | 欧美激情在线视频播放 | 国产高清视频在线免费观看 | www.欧美com| 欧美精品成人一区二区在线观看 | 精品久久免费观看 | 成人性色生活片免费看爆迷你毛片 |