记住两点
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的响应式原理，这里只是简单的模拟，以后还会更加深入去了解。
