快捷導(dǎo)航

vue3中的this.$set寫法舉例

更新時(shí)間：2024年10月28日 14:46:00 作者：Cheng Lucky

在Vue2中,由于數(shù)據(jù)響應(yīng)式是利用object.definedProperty()實(shí)現(xiàn)的,無(wú)法深層監(jiān)聽(tīng)數(shù)據(jù)變化,因此提供了$set方法來(lái)解決數(shù)據(jù)變化視圖未實(shí)時(shí)更新的問(wèn)題,然而,在Vue3中,數(shù)據(jù)響應(yīng)式使用ES6的proxy進(jìn)行數(shù)據(jù)代理,因此廢棄了$set的概念

vue3中的this.$set怎么寫呢?

在vue2中我們常常會(huì)遇到明明已經(jīng)改變了數(shù)據(jù)視圖卻沒(méi)有實(shí)時(shí)更新這樣的問(wèn)題

舉例

<el-input v-model="input.text" placeholder="請(qǐng)輸入內(nèi)容"></el-input>
data() {
	return{
		input:{
			text:'1'
		}
	}
}
mounted () {
  this.input.text = '2';  // 視圖層并沒(méi)有改變
}

這時(shí)vue2就提供了一個(gè)方法就是$set

this.$set(this.input, 'text', '3');

原因就是 Vue2 中的數(shù)據(jù)響應(yīng)式是利用 object.definedProperty()實(shí)現(xiàn)的，它是無(wú)法深層監(jiān)聽(tīng)數(shù)據(jù)的變化的。

而Vue3，用的是ES6的proxy，對(duì)數(shù)據(jù)響應(yīng)式進(jìn)行一個(gè)數(shù)據(jù)的代理。這個(gè)就厲害了啊，結(jié)合Vue3的 composition API。

- Vue3 中的 reactivity API：

reactive
readonly
ref
computed

- 如果想要讓一個(gè)對(duì)象變?yōu)轫憫?yīng)式數(shù)據(jù)，可以使用reactive或ref

setup() {
  const state =  reactive({
	input:{
		text:"1"
	}
  });
  return {
    state // 導(dǎo)出響應(yīng)式數(shù)組
  }
},
mounted() {
  console.log(state); // 是一個(gè)proxy
  state.input.text = '2'; // 視圖更新
}

Vue3中廢棄了$set的概念

到此這篇關(guān)于vue3中的this.$set怎么寫呢?的文章就介紹到這了,更多相關(guān)vue3 this.$set內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue組件封裝之dialog對(duì)話框組件詳解
這篇文章主要介紹了Vue組件封裝之dialog對(duì)話框組件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-05-05
Vue在chrome44偶現(xiàn)點(diǎn)擊子元素事件無(wú)法冒泡的解決方法
這篇文章主要給大家介紹了關(guān)于Vue在chrome44偶現(xiàn)點(diǎn)擊子元素事件無(wú)法冒泡的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
Vue監(jiān)聽(tīng)使用方法和過(guò)濾器實(shí)現(xiàn)
這篇文章主要介紹了Vue監(jiān)聽(tīng)使用方法和過(guò)濾器實(shí)現(xiàn)，過(guò)濾器為頁(yè)面中數(shù)據(jù)進(jìn)行強(qiáng)化，具有局部過(guò)濾器和全局過(guò)濾器
2022-06-06
element-ui如何在table中使用tooltip
這篇文章主要介紹了element-ui如何在table中使用tooltip問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
使用Vue實(shí)現(xiàn)Markdown文檔的展示和解析
在Vue項(xiàng)目中,Markdown文檔的使用越來(lái)越普遍,因此在Vue中如何進(jìn)行Markdown文檔展示與解析也成為了一個(gè)熱門話題,本文將介紹如何使用Vue實(shí)現(xiàn)Markdown文檔的展示和解析,文中通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下
2024-01-01
關(guān)于vue3?option?api新玩法分享
vue3新特性中最重要、內(nèi)容最多的組合式api,組合式api既可以解決之前vue2開(kāi)發(fā)的痛點(diǎn),又提升了性能,下面這篇文章主要給大家介紹了關(guān)于vue3?option?api新玩法的相關(guān)資料,需要的朋友可以參考下
2022-06-06
antd Select下拉菜單動(dòng)態(tài)添加option里的內(nèi)容操作
這篇文章主要介紹了antd Select下拉菜單動(dòng)態(tài)添加option里的內(nèi)容操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
vuex vue簡(jiǎn)單使用知識(shí)點(diǎn)總結(jié)
在本篇文章里小編給大家整理了關(guān)于vuex vue簡(jiǎn)單使用知識(shí)點(diǎn)總結(jié)，有需要的朋友們可以參考下。
2019-08-08
vue腳手架創(chuàng)建項(xiàng)目時(shí)報(bào)catch錯(cuò)誤及解決
這篇文章主要介紹了vue腳手架創(chuàng)建項(xiàng)目時(shí)報(bào)catch錯(cuò)誤及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
Vue2.x通用編輯組件的封裝及應(yīng)用詳解
這篇文章主要為大家詳細(xì)介紹了Vue2.x通用編輯組件的封裝及應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-05-05