学习vue的响应式 mvvm -01 数据响应式

理解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