記住兩點

1、使用 Object.defineProprety實現響應式原理

2、 data屬性代理到vm(即是Vue實例)上

Object.defineProperty 是如何使用的？

Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性， 并返回這個對象。

因為 Object.defineProperty() 是ES6新增的一個方法，所有我們使用vue不支持IE低版本瀏覽器，我們在選擇Vue開發(fā)項目的時候需要注意這個問題(哈哈!!! 如果要兼容太多低版本瀏覽器 我感覺是浪費生命的事情 ! )

如何使用

/*---------- defineProperty 基本使用 ------------*/

let obj = {}

let name = 'zhangsan'

Object.defineProperty(obj, 'name', {

get: function () {

console.log('get')

return name

},

set: function (newValue) {

console.log('set')

name = newValue

}

})

console.log(obj.name)

obj.name = 'lisi'

// 輸出

// get

// zhangsan

// set

我們對obj對象屬性進行get和set的時候都用了方法來實現，這只是一個基本的使用

模擬實現Vue響應式

代碼

// 模擬實現Vue響應式

let vm = {} // 我們把這個看做是Vue的一個實例

// data看作是Vue實例的data屬性

let data = {

price:100,

name:'zhangsan'

}

let key, value

for (const key in data) {

if (data.hasOwnProperty(key)) {

(function(key){

Object.defineProperty(vm,key,{ // 將data屬性代理到vm上

get:function(){

console.log('get',data[key]) // 監(jiān)聽

return data[key]

},

set:function(newValue){

console.log('set',newValue) // 監(jiān)聽

data[key] = newValue

}

})

})(key)

}

}

console.log(vm.name)

這樣就簡單的實現了一個Vue的響應式原理，這里只是簡單的模擬，以后還會更加深入去了解。

總結

以上是生活随笔為你收集整理的vue点击改变data_vue实现响应式原理即vue如何监听data的每个属性的变化的全部內容，希望文章能夠幫你解決所遇到的問題。

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