set修改物件 vue Vue的set方法深入淺出

2021-10-13 05:15:43 字數 1269 閱讀 1640

一、vue的set方法有什麼用

在vue中,對陣列和物件的某些操作是無法進行資料層與檢視層實時響應的,情況如下 :

預設資料:data = ['快樂','悲傷','理解']

1.當你利用索引直接設定乙個項時,如:data[1] = '前端喵'

2.當你修改陣列的長度時,如:data.length = 4

二、無法響應物件、陣列的原因

三、在元件中使用vue.set

1.我們通過vue.set使用這一方法,但需要先引入vue

import vue from 'vue' //引用vue

export default{

data(){

return{

data:['快樂','悲傷','理解']

methods:{

useset(){

this.data[1] = '前端喵' //檢視層不會更新

vue.set(data,1,'前端喵');//檢視層成功更新

2.vue.set有乙個別名: this.$set,通常我們在元件中不會引入vue,而是會常常使用到this,這個方法也是我們經常使用的

export default{

data(){

return{

data:['快樂','悲傷','理解']

methods:{

useset(){

this.data[1] = '前端喵' //檢視層不會更新

this.$set(data,1,'前端喵');//檢視層成功更新

四、vue.set引數詳解

陣列:data:['快樂','悲傷','理解']

vue.set(array,key,value)

// array 代表 陣列

// key 代表 鍵名

// value 代表 新的值

// 例子:

// 修改:vue.set(data,1,'前端喵')

//     新增:vue.set(data,5,'喜歡')

物件:data:{

'color':'#fff',

'size':'500'

vue.set(object,key,value)

// object 代表 物件

// key 代表  鍵名

// value 代表 新值

// 例子:

//     修改:vue.set(data,'color','#000')

//     新增:vue.set(data,'type','可愛')

ECMAScript 函式 修改物件

通過使用 ecmascript,不僅可以建立物件,還可以修改已有物件的行為。prototype 屬性不僅可以定義建構函式的屬性和方法,還可以為本地物件新增屬性和方法。建立新方法 通過已有的方法建立新方法 可以用 prototype 屬性為任何已有的類定義新方法,就像處理自己的類一樣。例如,還記得 n...

Windchill 修改物件的建立者 修改者

因為需要呼叫ootb 的 wt.vc包下的一些受保護的方法,toolhelper 類必須放在wt.vc包下 wtpart part null 需要設定的物件,可以是任何有大版本的物件iterated wtprincipalreference principal null 需要設定的參與者物件 too...

通過反射獲取,修改物件變數

最近工作不是太忙,就把自己的筆記整理出來,分享一下。這個是通過反射獲取修改物件變數的,有需要的可以看看,大神繞道 反射遍歷修改變數 field fidles map.get object.getmsgid getclass getdeclaredfields field fidlesother ob...