什么是響應式

當一個物體對外界的變化做出反應就叫響應式的，如“我打你一拳，你會喊疼”。

Vue的數據響應式

就是對數據做出改變時，視圖上也會做出相應的變化。

舉個例子

1const vm = new Vue({ 2 el:'#app', 3 data:{ 4 name: 'Luna' 5 } 6})

根據以上代碼，頁面上對應位置會顯示Luna，如執行vm.name='Pola'，則會由Luna變成Pola。

但這是正常情況，還有些變態情況

• 當data為空對象時，Vue會給出警告，例如。

1new Vue({ 2 data: {}, 3 template: ` 4 <div>{{n}}</div> 5 ` 6}).$mount("#app");

• 當data為a，卻要在頁面中顯示b，因為Vue只檢查第一層，可以消除警告，但不會將它轉換為響應式的

1new Vue({2 data: {3 obj: {4 a: 0 // obj.a 會被 Vue 監聽 & 代理5 }6 },7 template: `8 <div>9 {{obj.b}} 10 <button @click="setB">set b</button> 11 </div> 12 `, 13 methods: { 14 setB() { 15 this.obj.b = 1; 16 } 17 } 18}).$mount("#app");

此時點擊 set b，視圖中不會顯示1，因為Vue沒法監聽一開始不存在的obj.b

解決方法
1、提前把key聲明好，哪怕是空值。

1new Vue({2 data: {3 obj: {4 a: 0 // obj.a 會被 Vue 監聽 & 代理5 b: undefined6 }7 },8 template: `9 <div> 10 {{obj.b}} 11 <button @click="setB">set b</button> 12 </div> 13 `, 14 methods: { 15 setB() { 16 this.obj.b = 1; 17 } 18 } 19}).$mount("#app");

這是再點擊set b就會顯示1

2、使用Vue.set或this.$set

1new Vue({2 data: {3 obj: {4 a: 0 // obj.a 會被 Vue 監聽 & 代理5 b: undefined6 }7 },8 template: `9 <div> 10 {{obj.b}} 11 <button @click="setB">set b</button> 12 </div> 13 `, 14 methods: { 15 setB() { 16 Vue.set(this.obj,'b',1); //也可以這么寫this.$set(this.obj,'b',1) 17 } 18 } 19}).$mount("#app");

但是！

當data中有數組怎么辦，如果數組長度一直增加，就沒有辦法提前把key都聲明出來，每次改數組，都要用Vue.set或this.$set也很麻煩。

可以直接使用變異方法中的push

1new Vue({2 data: {3 array: ["a", "b", "c"]4 },5 template: `6 <div>7 {{array}}8 <button @click="setD">set d</button>9 </div> 10 `, 11 methods: { 12 setD() { 13 this.array.push("d"); 14 } 15 } 16}).$mount("#app");

尤雨溪篡改了數組的7個API，調用后會更新UI，可參考文檔中[變異方法]（https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95-mutation-method
）章節。

總結

以上是生活随笔為你收集整理的vue 数组长度_深入理解Vue的数据响应式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。