Vue中的$set的使用
阿新 • • 發佈:2022-05-04
在我們使用vue進行開發的過程中,可能會遇到一種情況:當生成vue例項後,當再次給資料賦值時,有時候並不會自動更新到檢視上去;
當我們去看vue文件的時候,會發現有這麼一句話:如果在例項建立之後新增新的屬性到例項上,它不會觸發檢視更新。如下程式碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue $set</title> <script src="https://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script> </head> <body> <div id="app"> 姓名:{{ name }}<br> 年齡:{{age}}<br> 性別:{{sex}}<br> 說明:{{info.content}} </div> <!-- JavaScript 程式碼需要放在尾部(指定的HTML元素之後) --> <script> var data = { name: "簡書", age: '3', info: { content: 'my name is test' } } var key = 'content'; var vm = new Vue({ el:'#app', data: data, ready: function(){ //Vue.set(data,'sex', '男') //this.$set('info.'+key, 'what is this?'); } }); data.sex = '男'; </script> </body> </html>
執行結果:
姓名:簡書
年齡:3
性別:
說明:my name is test
為什麼會這樣呢?當去查對應文件時,你會發現響應系統 ,把一個普通 Javascript 物件傳給 Vue 例項來作為它的 data 選項,Vue 將遍歷它的屬性,用 Object.defineProperty 將它們轉為 getter/setter,如上示例,將data在控制檯打印出來會發現:
在age及name都有get和set方法,但是在sex裡面並沒有這兩個方法,因此,設定了sex值後vue並不會自動更新檢視;
解決方法:
<script> var data = { name: "簡書", age: '3', info: { content: 'my name is test' } } var key = 'content'; new Vue({ el:'#app', data: data, ready: function(){ Vue.set(data,'sex', '男'); this.$set('info.'+key, 'what is this?'); } }); </script>
1、通過Vue.set方法設定data屬性,如上:
Vue.set(data,'sex', '男')
2、您還可以使用 vm.$set例項方法,這也是全域性 Vue.set方法的別名:
var key = 'content'; //這種主要用於當物件中某個屬性值動態生成時處理方式
this.$set('info.'+key, 'what is this?');
或
this.$set('info.content', 'what is this?');