響應式顧名思義就是對外界的觸發變化做出響應。

在vue中，vue的data是響應式的，我們會很好奇，為什么傳入new Vue({})中的data在做出變化的時候，UI中相應地顯示的數據也會響應做出變化，vue到底是如何實現的？

const myData = {n:0 } console.log('最初的myData:',myData) new Vue({data: myData,template: `<div>{{n}}</div>` }).$mount('#app')setTimeout(() => {myData.n += 10 }, 3000)console.log('被Vue篡改后的myData',myData)

明顯可以看出myData已經發生了變化。

簡單實現數據響應式

使用代理+監聽

function proxy({ data }) {//添加監聽//將data.n存儲在value中let value = data.n;delete data.n;Object.defineProperty(data, "n", {get() {return value;},set(newValue) {if (newValue < 0) return;value = newValue;},});//以上即添加監聽，監聽data.n的變化//下面代理新的data.n，以obj作為代理層const obj = {};Object.defineProperty(obj, "n", {get() {return data.n;},set(value) {if (value < 0) return;data.n = value;},});return obj; }let myData = {n:0} //vue對data進行篡改后為dataProxy let dataProxy = proxy({data:myData})//相當于const vm = new Vue({data:{...}})console.log(dataProxy.n)

監聽是修改data對象的過程，代理是在被修改過的data對象上創建的。這樣彼此之間的連接才不會斷開。當你的data有多個變量或屬性的時候，我們可以使用閉包和循環來實現這個過程。

所以當new Vue()的時候，vue對data做了以下操作：

當你創建實例的時候：

const vm = new Vue({data:myData})

• vue會讓vm成為myData的代理（將監聽到變化的結果進行代理，供用戶訪問或修改）
• vm會對myData的所有屬性進行監控（監聽他的變化）

vm就充當了一個中介的作用，在監聽到數據發生變化的時候就通知UI，UI上顯示的數據就會做出響應，發生改變。

那么Vue這樣做的目的是什么呢？

• 可以使用this訪問vm，this.n === myData.n //true
• 因為監控，所以才讓vue得知myData發生了變化
• 因為代理，得知屬性變化之后才能使用render(data)來更新UI和渲染頁面

總結數據響應式

• 所謂響應式就是對外界的變化做出相應的一種形式。
• const vm = new Vue({data:{n:0}}) 當修改vm.n或者this.n的時候，render(data)中的n就會做出相應的響應。這個過程就是Vue的數據響應式。
• vue目前通過Object.defineProperty來實現數據響應式。

當在data中添加屬性時

Vue雖然對data中的屬性或options對象中的屬性進行監聽和代理，但是他卻沒有辦法進行事先的監聽和代理。

對于對象來說：在初始化好data之后，你需要添加一個屬性，該如何實現？

如果是給一般對象新增屬性，我們其實可以在data中預先把所有可能用到的屬性全部寫出來，這樣并不需要新增屬性。當然也可以通過其他方法來添加屬性。下面我們來了解一個Vue提供的API：

Vue.set(object, key, value) // or this.$set(object, key, value)

作用：

• 在data中添加新的屬性
• 自動創建為他創建的代理和監聽（前提是沒有創建過）

//舉個栗子 new Vue({data: {obj: {a: 0}},template: `<div>{{obj.b}}<button @click='one'>One</button></div>`,methods: {one() {Vue.set(this.obj, 'b', 1)// 或 this.$set(this.obj, 'b', 1)}} }).$mount('#app') //未點擊按鈕的時候，沒有obj.b這個屬性，但vue不會報錯（對于空值），直接不顯示。

對于數組來說：

因為數組本身的特殊性，數組的長度無法預測，且我們無法使用undefined去為每一項占位，或一直使用Vue.set()方法，尤雨溪為我們提供了幾個Vue為數組提供的API。

列表渲染 — Vue.js?cn.vuejs.org

當你在使用push的時候，push進去的元素就已經被監聽了。這是被Vue封裝過的新的push方法。

它的原理：聲明一個新的類來繼承數組，循環遍歷，將每一個新增的元素告訴Vue，為其添加監聽和代理。從而讓這些新增的數組項去觸發視圖的更新。

小結

研究思路和方法遠比學習知識要重要的多，我們可以不懂或不看一個庫或者項目的源碼，但我們應該知道他的思路和方法是什么。

參考鏈接：

Jacky：淺析Vue數據響應式?zhuanlan.zhihu.com對象初始化?developer.mozilla.orgObject.defineProperty()?developer.mozilla.org

總結

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

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