理解VUE的设计思想：VUE的核心是 MVVM
MVVM框架的三要素：数据响应式 模板引擎以及渲染
数据响应式：监听数据的变化在视图中更新
Object.defineProperty()
Proxy
//对象响应式原理
//1 Object.defineProperty()
function defineReactive(obj, key, val) {
//val 可能是对象，需要递归处理
observe(val)
Object.defineProperty(obj, key, {
get() {
console.log('get', val)
return val
},
set(newval) {
if (newval != val) {
observe(newval)
console.log('set', newval)
val = newval
}
},
})
}
//对象响应式处理
function observe(obj) {
//判断obj类型必须是对象
if (typeof obj != 'object' || obj == null) {
return
}
Object.keys(obj).forEach((key) => defineReactive(obj, key, obj[key]))
}
//设置新的属性 类似$set
function set(obj, key, val) {
defineReactive(obj, key, val)
}
const obj = { name: 'aa', age: 11, baz: { a: 1 } }
observe(obj)
// obj.name
// obj.name = 'fffff'
//1 对象嵌套 就用到了递归，在defineReactive 里面再调用一次 observe(val)
// obj.baz.a
//2 这种情况 在set里面再调用一次observe(val)
//obj.baz={a:10}
//3 设置新的obj属性 类似$set
set(obj, 'dong', 'dong')
obj.dong
