vue点击改变data_vue实现响应式原理即vue如何监听data的每个属性的变化
記住兩點
1、使用 Object.defineProprety實現響應式原理
2、 data屬性代理到vm(即是Vue實例)上
Object.defineProperty 是如何使用的？
Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性， 并返回這個對象。
因為 Object.defineProperty() 是ES6新增的一個方法，所有我們使用vue不支持IE低版本瀏覽器，我們在選擇Vue開發項目的時候需要注意這個問題(哈哈!!! 如果要兼容太多低版本瀏覽器 我感覺是浪費生命的事情 ! )
如何使用
/*---------- 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]) // 監聽
return data[key]
},
set:function(newValue){
console.log('set',newValue) // 監聽
data[key] = newValue
}
})
})(key)
}
}
console.log(vm.name)
這樣就簡單的實現了一個Vue的響應式原理，這里只是簡單的模擬，以后還會更加深入去了解。
總結
以上是生活随笔為你收集整理的vue点击改变data_vue实现响应式原理即vue如何监听data的每个属性的变化的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 明日之后怎么跳过实名认证_明日之后新手教
- 下一篇： vue 分享给好友 点击分享按钮_基于v