响应式系统原理

class Observer {
  constructor(value) {
    this.value = value
    this.dep = new Dep()
    
    // 添加 __ob__ 属性,指向 Observer 实例
    def(value, '__ob__', this)
    
    if (Array.isArray(value)) {
      // 数组的响应式处理
      this.observeArray(value)
    } else {
      // 对象的响应式处理
      this.walk(value)
    }
  }
  
  walk(obj) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i])
    }
  }
  
  observeArray(items) {
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i])
    }
  }
}

class Dep {
  static target = null  // 当前正在计算的 Watcher
  
  constructor() {
    this.subs = []  // 存储Watcher
  }
  
  addSub(sub) {
    this.subs.push(sub)
  }
  
  removeSub(sub) {
    remove(this.subs, sub)
  }
  
  depend() {
    if (Dep.target) {
      Dep.target.addDep(this)
    }
  }
  
  notify() {
    const subs = this.subs.slice()
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()
    }
  }
}

class Watcher {
  constructor(vm, expOrFn, cb, options) {
    this.vm = vm
    this.expOrFn = expOrFn
    this.cb = cb
    this.options = options
    this.deps = []          // 存储Dep实例
    this.depIds = new Set() // 避免重复添加
    
    // 立即执行getter,触发依赖收集
    this.value = this.get()
  }
  
  get() {
    pushTarget(this)  // 设置Dep.target
    try {
      return this.expOrFn.call(this.vm, this.vm)
    } finally {
      popTarget()     // 移除Dep.target
      this.cleanupDeps() // 清理依赖
    }
  }
  
  addDep(dep) {
    const id = dep.id
    if (!this.depIds.has(id)) {
      this.depIds.add(id)
      this.deps.push(dep)
      dep.addSub(this)
    }
  }
  
  update() {
    // 将watcher放入异步队列
    queueWatcher(this)
  }
  
  run() {
    const value = this.get()
    if (value !== this.value) {
      const oldValue = this.value
      this.value = value
      this.cb.call(this.vm, value, oldValue)
    }
  }
}

function defineReactive(obj, key, val, customSetter, shallow) {
  const dep = new Dep()
  
  const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {
    return
  }
  
  // 兼容预定义的 getter/setter
  const getter = property && property.get
  const setter = property && property.set
  
  // 如果没有传入 val（且属性原本没有自定义 getter，或有 setter），则取当前值
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key]
  }
  
  // 递归转换嵌套对象
  let childOb = !shallow && observe(val)
  
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      const value = getter ? getter.call(obj) : val
      
      // 依赖收集
      if (Dep.target) {
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    set: function reactiveSetter(newVal) {
      const value = getter ? getter.call(obj) : val
      
      // 值未变化,不触发更新
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      
      // 转换新值
      childOb = !shallow && observe(newVal)
      
      // 通知更新
      dep.notify()
    }
  })
}

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

// vm.a 是响应式的
vm.b = 2
// vm.b 是非响应式的

vm.a = 3
// vm.a 修改会触发视图更新

// 全局方法
Vue.set(vm.someObject, 'b', 2)

// 实例方法(推荐在组件内使用)
this.$set(this.someObject, 'b', 2)

Vue.set(target, propertyName/index, value)

// 这样不会触发更新
Object.assign(this.someObject, { a: 1, b: 2 })

// 创建新对象替代原对象
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

// 或使用扩展运算符
this.someObject = { ...this.someObject, a: 1, b: 2 }

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})

vm.items[1] = 'x'        // 不是响应性的
vm.items.length = 2      // 不是响应性的

// 全局方法
Vue.set(vm.items, indexOfItem, newValue)

// 实例方法
vm.$set(vm.items, indexOfItem, newValue)

vm.items.splice(indexOfItem, 1, newValue)

// 使用 splice 方法
vm.items.splice(newLength)

// 模拟 Vue 2.x 的响应式：Object.defineProperty
let data = { msg: 'hello' }
let vm = {}

Object.defineProperty(vm, 'msg', {
  enumerable: true,
  configurable: true,
  get () {
    console.log('get: ', data.msg)
    return data.msg
  },
  set (newValue) {
    console.log('set: ', newValue)
    if (newValue === data.msg) { return }
    data.msg = newValue
    document.querySelector('#app').textContent = data.msg
  }
})

vm.msg = 'Hello World'
console.log(vm.msg)

// 模拟 Vue 3.x 的响应式：Proxy
let data = { msg: 'hello', count: 0 }

let vm = new Proxy(data, {
  get (target, key) {
    console.log('get, key: ', key, target[key])
    return target[key]
  },
  set (target, key, newValue) {
    console.log('set, key: ', key, newValue)
    if (target[key] === newValue) { return }
    target[key] = newValue
    document.querySelector('#app').textContent = target[key]
  }
})

vm.msg = 'Hello World'
console.log(vm.msg)

var vm = new Vue({
  data: {
    // 声明 message 为一个空值字符串
    message: '',
    // 声明 user 对象结构
    user: {
      name: '',
      age: 0
    },
    // 声明数组
    items: []
  },
  template: '<div>{{ message }}</div>'
})

// 之后设置值
vm.message = 'Hello!'

// ✅ 推荐：完整声明数据结构
export default {
  data() {
    return {
      // 基础类型
      count: 0,
      message: '',
      isActive: false,
      
      // 对象类型
      user: {
        id: null,
        name: '',
        email: ''
      },
      
      // 数组类型
      items: [],
      
      // 复杂嵌套结构
      config: {
        api: {
          baseUrl: '',
          timeout: 0
        },
        features: []
      }
    }
  }
}

// ❌ 不推荐：未声明或部分声明
export default {
  data() {
    return {
      // 只声明了部分属性
      count: 0
      // 其他属性在后续代码中动态添加
    }
  },
  
  methods: {
    initData() {
      // 不推荐：动态添加属性
      this.user = { name: 'test' }  // 非响应式
    }
  }
}

<div id="example">{{message}}</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})

vm.message = 'new message'  // 更改数据
console.log(vm.$el.textContent)  // => '123' (还未更新)

Vue.nextTick(function () {
  console.log(vm.$el.textContent)  // => 'new message' (已更新)
})

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '未更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '已更新'
      console.log(this.$el.textContent)  // => '未更新'
      
      this.$nextTick(function () {
        console.log(this.$el.textContent)  // => '已更新'
        // this 指向当前组件实例
      })
    }
  }
})

methods: {
  updateMessage() {
    this.message = '已更新'
    console.log(this.$el.textContent)  // => '未更新'
    
    this.$nextTick(() => {
      console.log(this.$el.textContent)  // => '已更新'
    })
  }
}

methods: {
  async updateMessage() {
    this.message = '已更新'
    console.log(this.$el.textContent)  // => '未更新'
    
    await this.$nextTick()
    console.log(this.$el.textContent)  // => '已更新'
  }
}

methods: {
  addItem() {
    this.items.push({ id: Date.now(), text: '新项' })
    
    // 需要操作新添加的 DOM 元素
    this.$nextTick(() => {
      const lastItem = this.$el.querySelector('.item:last-child')
      lastItem.scrollIntoView({ behavior: 'smooth' })
    })
  }
}

methods: {
  showInput() {
    this.isEditing = true
    
    // v-if 条件渲染的输入框还未渲染
    this.$nextTick(() => {
      this.$refs.input.focus()
    })
  }
}

methods: {
  updateLayout() {
    this.width = 200
    
    this.$nextTick(() => {
      const height = this.$refs.element.offsetHeight
      console.log('更新后的高度:', height)
    })
  }
}

mounted() {
  this.initThirdPartyLibrary()
},

methods: {
  updateData() {
    this.items = [...this.items, newItem]
    
    // 等待 DOM 更新后重新初始化库
    this.$nextTick(() => {
      this.initThirdPartyLibrary()
    })
  }
}

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})

// push - 添加元素
vm.items.push('d')        // ['a', 'b', 'c', 'd']

// pop - 删除最后一个元素
vm.items.pop()           // ['a', 'b', 'c']

// shift - 删除第一个元素
vm.items.shift()         // ['b', 'c']

// unshift - 在开头添加元素
vm.items.unshift('x')    // ['x', 'b', 'c']

// splice - 删除/添加元素
vm.items.splice(1, 1, 'y')  // ['x', 'y', 'c']

// sort - 排序
vm.items.sort()          // ['c', 'x', 'y']

// reverse - 反转
vm.items.reverse()       // ['y', 'x', 'c']

// filter - 过滤元素
vm.items = vm.items.filter(item => item !== 'x')

// concat - 连接数组
vm.items = vm.items.concat(['d', 'e'])

// map - 映射元素
vm.items = vm.items.map(item => item.toUpperCase())

// 使用扩展运算符
vm.items = [...vm.items, ...['d', 'e']]

const arrayProto = Array.prototype
const arrayMethods = Object.create(arrayProto)

const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]

methodsToPatch.forEach(function (method) {
  // 缓存原始方法
  const original = arrayProto[method]
  
  def(arrayMethods, method, function mutator (...args) {
    const result = original.apply(this, args)
    const ob = this.__ob__
    let inserted
    
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    
    // 对新添加的元素进行响应式处理
    if (inserted) ob.observeArray(inserted)
    
    // 通知更新
    ob.dep.notify()
    
    return result
  })
})

// 向对象添加新属性
Vue.set(this.user, 'email', 'test@example.com')

// 修改数组项
Vue.set(this.items, 0, { id: 1, text: '新值' })

// 添加嵌套属性
Vue.set(this.config.api, 'timeout', 5000)

// 删除对象属性
Vue.delete(this.user, 'email')

// 删除数组项
Vue.delete(this.items, 0)

// 在组件内使用
this.$set(this.user, 'email', 'test@example.com')

// 在组件内使用
this.$delete(this.user, 'email')

// 监听属性
this.$watch('a', function (newVal, oldVal) {
  console.log(`a 从 ${oldVal} 变为 ${newVal}`)
})

// 监听表达式
this.$watch('a.b.c', function (newVal, oldVal) {
  // 做点什么
})

// 监听函数
this.$watch(
  function () {
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // 做点什么
  }
)

// 深度监听
this.$watch('someObject', callback, {
  deep: true,
  immediate: true
})

// 返回取消监听函数
const unwatch = this.$watch('a', callback)
unwatch()  // 取消监听

// 回调函数形式
this.$nextTick(function () {
  // DOM 更新了
})

// Promise 形式
this.$nextTick().then(function () {
  // DOM 更新了
})

// async/await 形式
async function update() {
  this.message = 'new'
  await this.$nextTick()
  // DOM 更新了
}

// 当非响应式数据变化时强制更新
this.nonReactiveData = newValue
this.$forceUpdate()

// 对象形式(仅根实例)
var vm = new Vue({
  data: {
    a: 1
  }
})

// 函数形式(组件)
Vue.component('my-component', {
  data() {
    return {
      a: 1
    }
  }
})

Vue.component('my-component', {
  props: {
    // 基础类型检查
    propA: Number,
    
    // 多个可能的类型
    propB: [String, Number],
    
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    
    // 对象/数组默认值应当从一个工厂函数获取
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

var vm = new Vue({
  data: {
    a: 1,
    b: 2
  },
  computed: {
    // 只读计算属性
    sum: function () {
      return this.a + this.b
    },
    
    // 读写计算属性
    fullName: {
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      set: function (newValue) {
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  }
})

var vm = new Vue({
  data: {
    a: 1,
    b: { c: 2 }
  },
  watch: {
    // 监听属性
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    
    // 字符串方法名
    a: 'someMethod',
    
    // 深度监听
    b: {
      handler: function (val, oldVal) {
        // ...
      },
      deep: true
    },
    
    // 立即执行
    a: {
      handler: function (val, oldVal) {
        // ...
      },
      immediate: true
    },
    
    // 监听表达式
    'b.c': function (val, oldVal) {
      // ...
    }
  }
})

// 错误写法
this.user.email = 'test@example.com'  // 非响应式

// 正确写法
this.$set(this.user, 'email', 'test@example.com')

// 错误写法
this.items[0] = newValue  // 非响应式

// 正确写法
this.$set(this.items, 0, newValue)
// 或
this.items.splice(0, 1, newValue)

computed: {
  now: function () {
    return Date.now()  // 不会更新,因为 Date.now() 不是响应式依赖
  }
}

methods: {
  now: function () {
    return Date.now()  // 每次调用都会执行
  }
}

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName
  }
}

watch: {
  firstName(newVal, oldVal) {
    // 执行异步操作
    this.checkNameExists(newVal)
  }
}

// ❌ 错误：多个实例共享同一数据
Vue.component('my-component', {
  data: {
    count: 0
  }
})

// ✅ 正确：每个实例有独立的数据
Vue.component('my-component', {
  data() {
    return {
      count: 0
    }
  }
})

this.message = 'new'

this.$nextTick(() => {
  console.log('$nextTick', this.$el.textContent)  // 'new'
})

setTimeout(() => {
  console.log('setTimeout', this.$el.textContent)  // 'new'
}, 0)

watch: {
  'user.profile.settings': {
    handler(newVal, oldVal) {
      // 深度嵌套对象变化时触发
    },
    deep: true
  }
}

// 只监听需要的属性
watch: {
  'user.profile.settings.theme'(newVal) {
    // 只在 theme 变化时触发
  }
}

// 或使用计算属性
computed: {
  theme() {
    return this.user.profile.settings.theme
  }
},
watch: {
  theme(newVal) {
    // ...
  }
}

data() {
  return {
    // 深度响应式(默认)
    user: {
      profile: {
        name: 'test'
      }
    },
    
    // 非响应式(性能优化)
    frozenData: Object.freeze({
      bigArray: [...],
      config: {...}
    })
  }
}

// ✅ 推荐
data() {
  return {
    user: {
      id: null,
      name: '',
      email: ''
    },
    items: [],
    loading: false,
    error: null
  }
}

// ❌ 不推荐
data() {
  return {}
},
mounted() {
  this.user = {}  // 非响应式
}

// ✅ 推荐：使用 $set
this.$set(this.user, 'email', 'test@example.com')

// ✅ 推荐：创建新对象
this.user = { ...this.user, email: 'test@example.com' }

// ✅ 推荐：批量更新
this.user = Object.assign({}, this.user, {
  email: 'test@example.com',
  phone: '123456'
})

// ✅ 推荐：使用变异方法
this.items.push(newItem)
this.items.splice(index, 1, newItem)
this.items.sort((a, b) => a - b)

// ✅ 推荐：使用 $set
this.$set(this.items, index, newItem)

// ✅ 推荐：使用非变异方法创建新数组
this.items = this.items.filter(item => item.active)
this.items = [...this.items, newItem]

// ✅ 使用计算属性(有缓存)
computed: {
  filteredItems() {
    return this.items.filter(item => item.active)
  }
}

// ✅ 使用方法(支持参数,无缓存)
methods: {
  getFilteredItems(type) {
    return this.items.filter(item => item.type === type)
  }
}

// ✅ 简单逻辑：使用 computed
computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`
  }
}

// ✅ 复杂逻辑/异步：使用 watch
watch: {
  searchQuery(newVal) {
    this.loading = true
    this.fetchResults(newVal).then(results => {
      this.results = results
      this.loading = false
    })
  }
}

// ✅ 避免深度监听大对象
watch: {
  'user.name'(newVal) {  // 只监听需要的属性
    // ...
  }
}

// ✅ 使用 Object.freeze 优化性能
data() {
  return {
    // 大型静态数据不需要响应式
    bigList: Object.freeze([...]),
    config: Object.freeze({...})
  }
}

// ✅ 合理使用 $forceUpdate
// 当非响应式数据变化时
this.nonReactiveData = newValue
this.$forceUpdate()

// ❌ 陷阱1：对象添加属性
this.user.email = 'test@example.com'  // 非响应式

// ✅ 解决方案
this.$set(this.user, 'email', 'test@example.com')

// ❌ 陷阱2：数组索引修改
this.items[0] = newItem  // 非响应式

// ✅ 解决方案
this.$set(this.items, 0, newItem)

// ❌ 陷阱3：数组长度修改
this.items.length = 0  // 非响应式

// ✅ 解决方案
this.items.splice(0)

// ❌ 陷阱4：动态删除属性
delete this.user.email  // 非响应式

// ✅ 解决方案
this.$delete(this.user, 'email')

interface User {
  id: number
  name: string
  email: string
}

interface Item {
  id: number
  text: string
  active: boolean
}

export default {
  data(): {
    user: User
    items: Item[]
    loading: boolean
  } {
    return {
      user: {
        id: 0,
        name: '',
        email: ''
      },
      items: [],
      loading: false
    }
  }
}

class EventEmitter {
  constructor () {
    this.subs = {}
  }
  $on (eventType, handler) {
    this.subs[eventType] = this.subs[eventType] || []
    this.subs[eventType].push(handler)
  }
  $emit (eventType) {
    if (this.subs[eventType]) {
      this.subs[eventType].forEach(handler => handler())
    }
  }
}

var bus = new EventEmitter()
bus.$on('click', () => console.log('click'))
bus.$emit('click')

class Dep {
  constructor () { this.subs = [] }
  addSub (sub) { if (sub && sub.update) { this.subs.push(sub) } }
  notify () { this.subs.forEach(sub => { sub.update() }) }
}

class Watcher {
  update () { console.log('update') }
}

let dep = new Dep()
let watcher = new Watcher()
dep.addSub(watcher)
dep.notify()

class Vue {
  constructor (options) {
    this.$options = options || {}
    this.$data = options.data || {}
    const el = options.el
    this.$el = typeof options.el === 'string' ? document.querySelector(el) : el
    this._proxyData(this.$data)
    new Observer(this.$data)
    new Compiler(this)
  }
  _proxyData (data) {
    Object.keys(data).forEach(key => {
      Object.defineProperty(this, key, {
        get () { return data[key] },
        set (newValue) {
          if (data[key] === newValue) { return }
          data[key] = newValue
        }
      })
    })
  }
}

class Observer {
  constructor (data) { this.walk(data) }
  walk (data) {
    if (!data || typeof data !== 'object') { return }
    Object.keys(data).forEach(key => {
      this.defineReactive(data, key, data[key])
    })
  }
  defineReactive (data, key, val) {
    const that = this
    const dep = new Dep()
    that.walk(val)
    Object.defineProperty(data, key, {
      configurable: true,
      enumerable: true,
      get () {
        Dep.target && dep.addSub(Dep.target)
        return val
      },
      set (newValue) {
        if (newValue === val) { return }
        val = newValue
        that.walk(newValue)
        dep.notify()
      }
    })
  }
}

class Compiler {
  constructor (vm) {
    this.vm = vm
    this.el = vm.$el
    this.compile(this.el)
  }
  compile (el) {
    Array.from(el.childNodes).forEach(node => {
      if (node.nodeType === 3) { this.compileText(node) }
      if (node.nodeType === 1) { this.compileElement(node) }
      if (node.childNodes && node.childNodes.length) { this.compile(node) }
    })
  }
  compileText (node) {
    const reg = /\{\{(.+)\}\}/
    const value = node.textContent
    if (reg.test(value)) {
      const key = RegExp.$1.trim()
      node.textContent = value.replace(reg, this.vm[key])
      new Watcher(this.vm, key, (newValue) => {
        node.textContent = newValue
      })
    }
  }
  compileElement (node) {
    Array.from(node.attributes).forEach(attr => {
      if (attr.name.startsWith('v-')) {
        const dir = attr.name.substr(2)
        const key = attr.value
        this.update(node, key, dir)
      }
    })
  }
  update (node, key, dir) {
    const updaterFn = this[dir + 'Updater']
    updaterFn && updaterFn.call(this, node, this.vm[key], key)
  }
  textUpdater (node, value, key) {
    node.textContent = value
    new Watcher(this.vm, key, (newValue) => { node.textContent = newValue })
  }
  modelUpdater (node, value, key) {
    node.value = value
    new Watcher(this.vm, key, (newValue) => { node.value = newValue })
    node.addEventListener('input', () => { this.vm[key] = node.value })
  }
}

class Dep {
  constructor () { this.subs = [] }
  addSub (sub) { if (sub && sub.update) { this.subs.push(sub) } }
  notify () { this.subs.forEach(sub => { sub.update() }) }
}

class Watcher {
  constructor (vm, key, cb) {
    this.vm = vm
    this.key = key
    this.cb = cb
    Dep.target = this
    this.oldValue = vm[key]
    Dep.target = null
  }
  update () {
    const newValue = this.vm[this.key]
    if (this.oldValue === newValue) { return }
    this.cb(newValue)
  }
}