vue3中的this.$set寫法舉例
更新時間：2024年10月28日 14:46:00 作者：Cheng Lucky
在Vue2中,由于數(shù)據(jù)響應(yīng)式是利用object.definedProperty()實(shí)現(xiàn)的,無法深層監(jiān)聽數(shù)據(jù)變化,因此提供了$set方法來解決數(shù)據(jù)變化視圖未實(shí)時更新的問題,然而,在Vue3中,數(shù)據(jù)響應(yīng)式使用ES6的proxy進(jìn)行數(shù)據(jù)代理,因此廢棄了$set的概念
vue3中的this.$set怎么寫呢?
在vue2中我們常常會遇到明明已經(jīng)改變了數(shù)據(jù)視圖卻沒有實(shí)時更新這樣的問題
舉例
<el-input v-model="input.text" placeholder="請輸入內(nèi)容"></el-input>
data() {
return{
input:{
text:'1'
}
}
}
mounted () {
this.input.text = '2'; // 視圖層并沒有改變
}這時vue2就提供了一個方法就是$set
this.$set(this.input, 'text', '3');
原因就是 Vue2 中的數(shù)據(jù)響應(yīng)式是利用 object.definedProperty()實(shí)現(xiàn)的，它是無法深層監(jiān)聽數(shù)據(jù)的變化的。
而Vue3，用的是ES6的proxy，對數(shù)據(jù)響應(yīng)式進(jìn)行一個數(shù)據(jù)的代理。這個就厲害了啊，結(jié)合Vue3的 composition API。
- Vue3 中的 reactivity API：
- reactive
- readonly
- ref
- computed
- 如果想要讓一個對象變?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); // 是一個proxy
state.input.text = '2'; // 視圖更新
}Vue3中廢棄了$set的概念
到此這篇關(guān)于vue3中的this.$set怎么寫呢?的文章就介紹到這了,更多相關(guān)vue3 this.$set內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue組件封裝之dialog對話框組件,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
Vue在chrome44偶現(xiàn)點(diǎn)擊子元素事件無法冒泡的解決方法
這篇文章主要給大家介紹了關(guān)于Vue在chrome44偶現(xiàn)點(diǎn)擊子元素事件無法冒泡的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Vue監(jiān)聽使用方法和過濾器實(shí)現(xiàn)
這篇文章主要介紹了Vue監(jiān)聽使用方法和過濾器實(shí)現(xiàn)，過濾器為頁面中數(shù)據(jù)進(jìn)行強(qiáng)化，具有局部過濾器和全局過濾器2022-06-06
這篇文章主要介紹了element-ui如何在table中使用tooltip問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
使用Vue實(shí)現(xiàn)Markdown文檔的展示和解析
在Vue項(xiàng)目中,Markdown文檔的使用越來越普遍,因此在Vue中如何進(jìn)行Markdown文檔展示與解析也成為了一個熱門話題,本文將介紹如何使用Vue實(shí)現(xiàn)Markdown文檔的展示和解析,文中通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-01-01
vue3新特性中最重要、內(nèi)容最多的組合式api,組合式api既可以解決之前vue2開發(fā)的痛點(diǎn),又提升了性能,下面這篇文章主要給大家介紹了關(guān)于vue3?option?api新玩法的相關(guān)資料,需要的朋友可以參考下2022-06-06
antd Select下拉菜單動態(tài)添加option里的內(nèi)容操作
這篇文章主要介紹了antd Select下拉菜單動態(tài)添加option里的內(nèi)容操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
在本篇文章里小編給大家整理了關(guān)于vuex vue簡單使用知識點(diǎn)總結(jié)，有需要的朋友們可以參考下。2019-08-08
vue腳手架創(chuàng)建項(xiàng)目時報catch錯誤及解決
這篇文章主要介紹了vue腳手架創(chuàng)建項(xiàng)目時報catch錯誤及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細(xì)介紹了Vue2.x通用編輯組件的封裝及應(yīng)用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05