Vue 响应式源码分析

Object.defineProperty(obj, prop, descriptor)

function defineReactive(obj, key, val) {
  // 创建依赖收集器
  // const dep = new Dep()
  
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      // 依赖收集
      // if (Dep.target) {
      //     dep.depend()
      // }
      return val
    },
    set: function reactiveSetter(newVal) {
      if (newVal === val) return
      val = newVal
      // 通知所有依赖
      // dep.notify()
    }
  })
}

class Observer {
  constructor(value) {
    // 给被观察的对象添加 __ob__ 属性，指向这个 Observer 实例
    def(value, '__ob__', this)
    if(Array.isArray(value)) {
      // 劫持数组方法
      // ...
      // 处理数组
      this.observeArray()
    } else {
      // 处理对象
      const keys = Object.keys(value)
      for (let i = 0; i < keys.length; i++) {
        const key = keys[i]
        defineReactive(value, key, NO_INITIAL_VALUE, undefined, shallow, mock)
      }
    }
  }
  observeArray(value) {
    for (let i = 0, l = value.length; i < l; i++) {
      observe(value[i], false, this.mock)
    }
  }
}

export function def(obj, key, val) {
  Object.defineProperty(obj, key, {
    value: val,
  })
}

function observe(value) {
  if (typeof value !== 'object') return
  let ob
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__
  } else {
    ob = new Observer(value)
  }
  return ob
}

new Vue({
  template:`
    <div>
      <span>{{ text1 }}</span>
      <span>{{ text2 }}</span>
    </div>
  `,
  data: {
    text1: 'text1',
    text2: 'text2',
    text3: 'text3',
  }
})

data.text3 = 'text3 modify'

let globalObj = {
  text1: 'text1'
}

let o1 = new Vue({
  template:`
    <div><span>{{ globalObj.text1 }}</span></div>
  `,
  data: {
    globalObj
  }
})

let o2 = new Vue({
  template:`
    <div><span>{{ globalObj.text1 }}</span></div>
  `,
  data: {
    globalObj
  }
})

globalObj.text1 = 'text1 modify'

class Dep {
  static target  // 静态属性，全局唯一的当前正在执行的 Watcher
  id  // 实例属性，每个 dep 的唯一标识
  subs  // 实例属性，存储所有订阅者

  constructor {
    this.id = uid++
    this.subs = []
  }

  // 添加订阅者
  addSub(sub) {
    this.subs.push(sub)
  }

  // 移除订阅者
  removeSub(sub) {
    remove(this.subs, sub)
  }

  // 建立依赖关系
  depend() {
    if(Dep.target) { // 如果有正在执行的 Watcher，将这个 Watcher 作为依赖
      Dep.target.addDep(this)
    }
  }

  // 通知所有订阅者
  notify() {
    for(let i = 0, l = this.subs.length; i < l; i++) {
      this.subs[i].update()
    }
  }
}

Dep.target = null;

class Watcher {
  constructor (vm, expOrFn, cb, options={}) {
    if(options) {
      this.lazy = !!this.lazy
      this.sync = !!this.sync
    }

    this.vm = vm  // Vue 实例
    this.cb = cb  // 回调函数
    this.deps = []  // 存储该 watcher 依赖的所有 dep
    this.newDeps = []  // 新一轮依赖收集的 dep
    this.depIds = new Set()  // 依赖的id集合，用于去重
    this.newDepIds = new Set()  // 新依赖收集的id集合
    this.expression = expOrFn.toString()  // 用于调试
    this.dirty = this.lazy
    this.id = ++uid  // 唯一标识

    // 这里定义了 getter
    if(typeof expOrFn === 'function') {
      this.getter = expOrFn  // 如果 expOrFn 是函数，直接作为 getter
    } else {
      this.getter = parsePath(expOrFn) // 如果是字符串，转换成获取对象属性的函数
    }

    // 立即执行一次 getter，进行初始化和依赖收集
    this.value = this.lazy ? undefined : this.get()
  }

  get() {
    pushTarget(this)  // 将当前 watcher 设置为全局活动的 watcher
    let value
    try {
      // 执行 getter，触发被观察对象的 getter，从而收集依赖
      value = this.getter.call(this.vm, this.vm)
    } catch (e) {
      throw e
    } finally {
      popTarget()  // 恢复之前活动的watcher
      this.cleanupDeps()  // 清理依赖
    }
    return value
  }

  addDep(dep) {
    const id = dep.id
    // 检查是否已在新的依赖集合中
    if(!this.newDepIds.has(id)) {
      // 添加到新的依赖 id 集合中
      this.newDepIds.add(id)
      // 添加到新的依赖数组中
      this.newDeps.push(dep)
      // 检查是否在旧依赖中
      if(!this.depIds.has(id)) {
        // 如果不在旧依赖中，让 dep 去收集当前 watcher
        dep.addSub(this)
      }
    }
  }

  // 清理依赖
  cleanupDeps() {
    let i = this.deps.length
    // 遍历旧依赖数组
    while (i--) {
      const dep = this.deps[i]
      // 如果新依赖数组中不包含这个旧依赖
      if (!this.newDepIds.has(dep.id)) {
        // 将这个 watcher 从 dep 中移除
        dep.removeSub(this)
      }
    }
    // depIds 更新，清空 newDepIds
    let tmp: any = this.depIds
    this.depIds = this.newDepIds
    this.newDepIds = tmp
    this.newDepIds.clear()
    // deps 更新，清空 newDeps
    tmp = this.deps
    this.deps = this.newDeps
    this.newDeps = tmp
    this.newDeps.length = 0
  }

  update() {
    // lazy 模式，懒计算，不会立即重新计算，只是将 dirty 标记为 true
    if (this.lazy) {
      this.dirty = true
    } else if (this.sync) {  // sync 模式，同步更新模式，立即更新
      this.run()
    } else {  // 默认异步更新模式，将 watcher 放入更新队列
      queueWatcher(this)
    }
  }

  run() {
    const value = this.get()  // 获取新的值
    if(value !== this.value || isObject(value) || this.deep) {  // 如果新旧值不相等 | 新值是对象 | 深度监听
      const oldValue = this.value  // 保存旧值
      this.value = value  // 设置新值
      this.cb.call(this.vm, value, oldValue)  // 执行回调函数，并传入新值和旧值
    }
  }
}

const targetStack = []

export function pushTarget(target) {
  targetStack.push(target)
  Dep.target = target
}

export function popTarget() {
  targetStack.pop()
  Dep.target = targetStack[targetStack.length - 1]
}

// 模板渲染 Render Watcher
<div>{{ message }}</div>

// computed 选项，Computed Watcher
computed: {
  total() {
    return this.price * this.quantity
  }
}

// watch 选项，User Watcher
watch: {
  price(newVal, oldVal) {
    console.log('price change:', newVal)
  }
}

function initData() {
  observe(data)  // 上文中提到的生成响应式对象入口函数
}

function initComputed() {
  // 为每个计算属性创建 computed watcher
  new Watcher(vm, getter, null, options)
}
function initWatch() {
  // 为每个 watch 创建 user watcher
  new Watcher(vm, key, cb, options)
}

// 创建渲染 watcher (mount 阶段)
Vue.prototype.$mount = new Watcher(vm, updateComponent, null, options)

var vm = new Vue({
 data: {
   a: 1
 }
})
// vm.a 是响应式的
vm.b = 2
// vm.b 是非响应式的

function initData(vm) {
  let data = vm.$options.data
  observe(data)  // 在这里调用 observe, 使对象响应式化
}

var vm = new Vue({
  data: {
    someObject: {
      a: 1,
    }
  }
})

Vue.set(vm.someObject, 'b', 2)

this.$set(this.someObject, 'b', 2)

this.someObject = Object.assign({}, this.someObject, {a: 1, b: 2})

Object.assign(this.someObject, {a: 1, b: 2})

// 等同于
this.someObject.a = 1  // 触发 a 的 setter
this.someObject.b = 2  // b 仍为非响应式

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

// 修改数组索引
vm.items.splice(indexOfItem, 1, newValue)
// 修改数组长度
vm.items.splice(2)

function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      const res = Reflect.get(target, key, receiver)
      track(target, key)  // 依赖收集
      return res
    },
    set(target, key, value, receiver) {
      const res = Reflect.set(target, key, value, receiver)
      trigger(target, key)  // 触发更新
      return res
    }
  })
}

Reflect.get(target, key)  // 获取属性
Reflect.set(target, key, value)  // 设置属性
Reflect.has(target, key)  // 检查属性
Reflect.deleteProperty(target, key)  // 删除属性

const count = ref(0)
console.log(count.value)  // 需要 .value 访问

const obj = reactive({
  count: 0
})
console.log(obj.count)  // 直接访问，无需 .value

<template>
  <div>
    <!-- 已自动解包，直接访问，无需 .value --->
    {{ count }}
  </div>
</template>

<script setup>
const count = ref(0)
// 在 reactive 对象中 ref 会自动解包
const state = reactive({
  count, // 自动解包
  double: computed(() => state.count*2),
})
</script>

// ref 支持所有数据类型
const num = ref(0)
const str = ref('XD')
const boo = ref(true)
const obj = ref({a:1, b:2})
const arr = ref([1,2])

// reactive 只支持引用数据类型(对象/数组)
const obj2 = reactive({a:1, b:2})
const arr2 = reactive([1,2])

const obj = reactive({name: 'River', age: 18})

const { age } = obj  // 直接解构会失去响应式

// 使用 toRef
const age = toRef(obj, 'age')
// 或者 toRefs
const { name, age } = toRefs(obj)

// 这样做的好处是可以使对象保持响应式
// 修改 ref 会更新源对象
age.value++
console.log(obj.age) // 19
// 修改源对象会更新 ref
obj.age++
console.log(age.value) // 20

const foo = ref([1,2])
foo.value = [3,4]  // 可以

const foo = reactive([1,2])
foo = [3,4]  // 不行

const user = ref({
  name: 'Zhang',
  profile: {
    age: 25,
    address: {
      city: 'Beijing'
    }
  }
})

// ref 内部会用 reactive 深层转换对象
user.value.profile.age = 26      // 触发响应式更新
user.value.profile.address.city = 'Shanghai' // 触发响应式更新

const user = reactive({
  name: 'Zhang',
  profile: {
    age: 25,
    address: {
      city: 'Beijing'
    }
  }
})

// reactive 会深层转换所有嵌套对象
user.profile.age = 26           // 触发响应式更新
user.profile.address.city = 'Shanghai' // 触发响应式更新

function useCount() {
  const count = ref(0)
  return count
}

function useUser() {
  const state = reactive({name: 'River', age: 18})
  return toRefs(state)
}

import { ref, watchEffect } from 'vue'

const count = ref(0)
const message = ref('Hello')

watchEffect(() => {
  console.log(`Count: ${count.value}, Message: ${message.value}`)
})

// 修改任何依赖都会触发回调
count.value++  // 输出：Count: 1, Message: Hello
message.value = 'Hi'  // 输出：Count: 1, Message: Hi

const stop = watchEffect(() => {})

// 当不再需要监听时
stop()

const { stop, pause, resume } = watchEffect(() => {})

// 暂停
pause()

// 恢复
resume()

// 停止
stop()

const userId = ref('1')
const userData = ref(null)

watchEffect((onCleanup) => {
  // 创建一个取消控制器
  const controller = new AbortController()

  // 网络请求
  fetch(`/api/user/${userId.value}`, {
    signal: controller.signal,
  }).then(data => userData.value = JSON.parse(data))

  // 清理函数：如果 userId 改变，则取消之前的请求
  onCleanup(() => {
    controller.abort()
  })
})

setTimeout(() => {
  userId.value = '2'
}, 100)

初始执行：
1. 开始请求，userId: 1

100 ms后修改 userId：
2. 执行清理，取消之前的网络请求 (清理之前的副作用`onCleanup`)
3. 请求被取消 (之前的请求被 `abort`)
4. 开始请求，userId: 2 (重新执行 `watchEffect`)

import { onWatcherCleanup } from 'vue'

// ...

watchEffect(() => {
  // ...

  onWatcherCleanup(() => {
    controller.abort()
  })

  // ...
})

// ...

watchEffect(() => console.log(count.value))  // 自动追踪依赖

watch(count, newVal => console.log(count.value))  // 明确执行依赖

watchEffect(() => {})  // 默认立即执行

watch(source, () => {}, { immediate: true })  // 默认不会立即执行，需设置 immediate 为 true