Vue 数据响应式

改变数据的值的时候，相应的页面的数据会发生改变。

模拟实现该功能使用Object.definePropery. 代码如下

function defineReactive(obj, key, val) {    observe(obj)    Object.defineProperty(obj, key, {        get() {            console.log(`get ${key}, ${val}`);            return val;        },        set(newVal) {            if (val !== newVal) {                console.log(`set ${key}, ${newVal}`);                val = newVal;            }        }    })}

由于使用Object.defineProperty 第三个参数可以获得set/get来拦截对象数据的更新，来实现自定义的动作。

Vue

1. reactivity

响应式是在编程的上下文环境中。有人理解响应式编程像streams类似的流，但是在Vue中是指改变了state，state会导致界面进行渲染变化或系统变化

在web的环境中，变化导致Dom进行变化。

如何理解响应式？ 我们举个例子，你有个函数：

function 10timesa（a) {
  return a * 10;
}
a = 3
b = 10timea(a)

a = 4
b = ? 

Vue how to track the changes？

1. convert

isObject(obj) {
  if (typeof obj == "object") {
      return true
  } else {
      return false
  }
}

function convert(obj) {
  Object.keys(obj).forEach((key) => {
    let internalValue = obj[key]
    object.definePropery(obj, key, {
      get() {
        return internalValue
      }
    
      set (newValue) {
        internalValue = newValue
      }
      
    })
  })
    
}

高阶组件