vue源码分析（三）

Vue源码阅读（三）

响应式数据

data**，props，computed，watch**

响应式原理

Object.defineProperty** + 观察者模式**

// 定义响应式，
function defineReactive (obj, key, val) {
  Object.defineProperty(obj, key, {
    enumerable: false,
    configurable: true,
    get: function getter () {
      console.log('get:' + key)
      return val
    },
    set: function setter (newVal) {
      console.log('set: ' + key)
      val = newVal
    }
  })
}

const data = { name: '张三 ', age: 18 }

const keys = Object.keys(data)

keys.map(key => {
  defineReactive(data, key, data[key])
})

console.log(data.name)   // get: name

data.age = 20            // set: age

observe (vm.data)

render.call(vm)

vm.flag = 1 —-> vm.flag.set(1)

案例分析

// 1
vm.flag = 1

// 2
vm.male.name = 'ted'
vm.male.age = 40

// 3
vm.male = { name: 'ted', age: 40 }
vm.male.name = 'abc'
vm.male.age = 41

vm.male = {}
vm.male.name = 'ted'
vm.male.age = 40

// 4
function onClick (vm) {
  vm.male.name = 'xxx'
  vm.male.age = 50
  console.log(document.getElementById('demo').innerText)
  vm.$nextTick(() => {
    console.log(document.getElementById('demo').innerText)
  })
}

event-loop

ISSUE（#3371）