Vue响应式原理与虚拟DOM实现步骤详细讲解

<template>
  <div>{{ count }}</div>
</template>
<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

this.count += 1

let queue = []
function flushQueue() {
  queue.forEach((watcher) => watcher.run())
  queue = []
}
function queueWatcher(watcher) {
  queue.push(watcher)
  nextTick(flushQueue)
}
class Watcher {
  constructor() {
    queueWatcher(this)
  }
  run() {
    console.log('更新DOM元素')
  }
}
const data = { count: 0 }
Object.defineProperty(data, 'count', {
  get() {
    console.log('获取count的值')
    return value
  },
  set(newValue) {
    console.log('设置count的值为', newValue)
    value = newValue
    new Watcher()
  }
})
// 更新count属性
data.count = 1
data.count = 2

在这里插入代码片function diff(oldNode, newNode) {
  if (!oldNode) {
    return { type: 'add', node: newNode }
  }
  if (!newNode) {
    return { type: 'remove', node: oldNode }
  }
  if (oldNode.type !== newNode.type) {
    return { type: 'replace', node: newNode }
  }
  if (oldNode.text !== newNode.text) {
    return { type: 'text', node: newNode }
  }
  const diffChildren = []
  const oldChildren = oldNode.children || []
  const newChildren = newNode.children || []
  const len = Math.max(oldChildren.length, newChildren.length)
  for (let i = 0; i < len; i++) {
    const childDiff = diff(oldChildren[i], newChildren[i])
    if (childDiff) {
      diffChildren.push(childDiff)
    }
  }
  if (diffChildren.length) {
    return { type: 'children', children: diffChildren }
  }
}
const oldNode = {
  type: 'div',
  children: [
    {
      type: 'p',
      text: '旧的子元素'
    }
  ]
}
const newNode = {
  type: 'div',
  children: [
    {
      type: 'p',
      text: '新的子元素'
    }
  ]
}
const diffResult = diff(oldNode, newNode)
console.log(diffResult)

{
  type: 'children',
  children: [
    {
      type: 'text',
      node: {
        type: 'p',
        text: '新的子元素'
      }
    }
  ]
}