Responsive and renderer collaboration

The Fundamental Principles of Reactivity and Renderer Collaboration

One of the core mechanisms of Vue.js is the collaboration between the reactivity system and the renderer. When component state changes, the reactivity system can automatically detect these changes and trigger the renderer to re-render the affected parts of the component. This collaborative relationship is achieved through two key phases: dependency collection and update dispatching.

const data = { count: 0 }

const proxy = new Proxy(data, {
  get(target, key) {
    track(target, key) // Dependency collection
    return target[key]
  },
  set(target, key, value) {
    target[key] = value
    trigger(target, key) // Update dispatching
    return true
  }
})

Detailed Process of Dependency Collection

During component rendering, whenever reactive data is accessed, Vue intercepts this operation through the getter and records the currently executing render function as a dependency. This process is called dependency collection, which establishes a mapping relationship between data properties and component rendering.

let activeEffect

function track(target, key) {
  if (activeEffect) {
    const depsMap = targetMap.get(target) || new Map()
    const dep = depsMap.get(key) || new Set()
    dep.add(activeEffect)
    targetMap.set(target, depsMap)
    depsMap.set(key, dep)
  }
}

Trigger Mechanism for Update Dispatching

When reactive data changes, the setter triggers the update process. Vue finds all component render functions that depend on this data and marks them for re-execution. This process is optimized through a scheduler to avoid unnecessary duplicate computations.

function trigger(target, key) {
  const depsMap = targetMap.get(target)
  if (!depsMap) return
  
  const effects = depsMap.get(key)
  effects && effects.forEach(effect => {
    if (effect.scheduler) {
      effect.scheduler()
    } else {
      effect()
    }
  })
}

Workflow of the Renderer

The renderer is responsible for converting the virtual DOM into the real DOM. When reactive data changes trigger a re-render, the renderer generates a new virtual DOM tree and compares the differences between the old and new trees using a diff algorithm, ultimately updating only the necessary DOM nodes.

function patch(oldVNode, newVNode, container) {
  if (!oldVNode) {
    // Initial render
    mountElement(newVNode, container)
  } else {
    // Update render
    patchElement(oldVNode, newVNode)
  }
}

Optimization Role of the Virtual DOM

The virtual DOM acts as a buffer layer between the reactivity system and the real DOM, significantly improving performance through batch updates and difference comparison. When multiple reactive data changes occur simultaneously, Vue merges them into a single update.

const queue = []
let isFlushing = false

function queueJob(job) {
  if (!queue.includes(job)) {
    queue.push(job)
  }
  if (!isFlushing) {
    isFlushing = true
    Promise.resolve().then(flushJobs)
  }
}

function flushJobs() {
  queue.sort((a, b) => a.id - b.id)
  for (let i = 0; i < queue.length; i++) {
    queue[i]()
  }
  queue.length = 0
  isFlushing = false
}

Component-Level Update Granularity

Vue 3 introduces a component-based update mechanism. When reactive data changes, only the components that depend on that data are re-rendered, rather than the entire application. This fine-grained update strategy significantly improves performance.

const component = {
  setup() {
    const count = ref(0)
    return { count }
  },
  render() {
    return h('div', this.count)
  }
}

Performance Optimization of Reactivity and Renderer

Vue employs various optimization strategies to reduce unnecessary rendering. The compiler analyzes static content in templates to generate more efficient render functions. The reactivity system also skips unnecessary dependency collection.

function createRenderer(options) {
  const {
    patchProp,
    insert,
    createElement
  } = options
  
  function mountElement(vnode, container) {
    const el = createElement(vnode.type)
    if (vnode.props) {
      for (const key in vnode.props) {
        patchProp(el, key, null, vnode.props[key])
      }
    }
    insert(el, container)
  }
  
  return { render }
}

Binding Relationship Between Reactive Data and Render Functions

Each component instance has corresponding render functions that establish binding relationships with reactive data during their initial execution. When data changes, only the relevant render functions are re-executed.

const App = {
  data() {
    return { message: 'Hello' }
  },
  render() {
    return h('div', this.message)
  }
}

const vm = createApp(App).mount('#app')
vm.message = 'Updated' // Triggers re-render

Implementation Details of the Asynchronous Update Queue

Vue's asynchronous update queue ensures that all data changes within the same event loop trigger only one re-render. This mechanism avoids rendering intermediate states unnecessarily.

let pending = false
const callbacks = []

function nextTick(callback) {
  return callback 
    ? Promise.resolve().then(callback)
    : Promise.resolve()
}

function flushCallbacks() {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

Impact of the Compiler on Rendering Performance

Vue's template compiler analyzes template structures to generate optimized render code. Static nodes are hoisted outside the render function to avoid repeated creation.

// Template before compilation
<div>
  <span>Static content</span>
  <span>{{ dynamic }}</span>
</div>

// Compiled render function
function render() {
  return (_openBlock(), _createBlock("div", null, [
    _hoisted_1, // Static node
    _createVNode("span", null, _toDisplayString(_ctx.dynamic), 1 /* TEXT */)
  ]))
}

Reactivity System and Custom Renderers

Vue's reactivity system can work with custom renderers to achieve rendering targets in non-DOM environments. This design allows Vue to be used for building native applications or WebGL rendering.

const { createRenderer } = require('vue')

const nodeOps = {
  createElement(tag) {
    return { tag }
  },
  insert(child, parent) {
    parent.children = parent.children || []
    parent.children.push(child)
  }
}

const renderer = createRenderer(nodeOps)

Reactive Data and Rendering Context

When a component's render function executes, it accesses reactive data, which is bound to the rendering context through a proxy mechanism. This design ensures that data properties can be directly accessed in templates.

const instance = {
  setup() {
    const count = ref(0)
    return { count }
  },
  render() {
    // The rendering context proxies the object returned by setup
    return h('div', this.count)
  }
}

Side Effect Management in Render Functions

Each component's render function is treated as a side effect function. When reactive data is accessed, Vue records these side effects to ensure that data changes correctly trigger re-rendering.

function setupRenderEffect(instance, vnode, container) {
  instance.update = effect(() => {
    if (!instance.isMounted) {
      // Initial render
      const subTree = instance.render()
      patch(null, subTree, container)
      instance.isMounted = true
    } else {
      // Update render
      const nextTree = instance.render()
      patch(instance.subTree, nextTree, container)
      instance.subTree = nextTree
    }
  }, {
    scheduler: queueJob
  })
}

Interaction Between Reactive Data and Slot Content

Slot content can also access reactive data. When this data changes, only the parts of the slot that depend on the data are re-rendered, maintaining efficient update performance.

const Parent = {
  setup() {
    const count = ref(0)
    return { count }
  },
  render() {
    return h(Child, null, {
      default: () => h('div', this.count)
    })
  }
}

Debugging Interfaces for the Renderer and Reactivity System

Vue provides rich development tool integration points to monitor reactive data changes and rendering processes. These tools are very helpful for understanding internal mechanisms.

const proxy = new Proxy(data, {
  get(target, key) {
    console.log(`GET ${key}`)
    return Reflect.get(target, key)
  },
  set(target, key, value) {
    console.log(`SET ${key} = ${value}`)
    return Reflect.set(target, key, value)
  }
})