学习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

 

模板引擎：提供描述视图的模板语法

• 插值：{{}}
• 指令：v-bind, v-on, v-model, v-for, v-if

渲染：讲模板转换成html

• 模板 =>vdom=>dom