Vue三大系统揭秘：带你手把手实现Mini-Vue（十七）

前端

2024-02-05 20:19:50

一览 Vue 三大支柱

Vue 的成功归功于其精妙的架构，而三大核心系统——编译模板系统、渲染模块和响应式模块——正是这栋摩天大楼的基石。

1. 编译模板系统

编译模板系统将 HTML 模板转换为更易于处理的渲染函数。它采用创新方法，将模板解析为抽象语法树（AST），然后将其编译为更优化的渲染函数。

2. 渲染模块

渲染模块负责将编译后的渲染函数转换成虚拟 DOM。虚拟 DOM 是一种轻量级的 DOM 表示形式，它可以高效地更新实际 DOM，从而实现更流畅的渲染性能。

3. 响应式模块

响应式模块是 Vue 的核心，它允许数据状态发生变化时自动更新视图。它使用数据劫持和发布-订阅模式来监听数据更改并触发视图更新。

亲手打造 Mini-Vue

为了加深理解，我们将打造一个 Mini-Vue 版本，它将包含 Vue 的核心模块，如渲染、响应式系统和应用入口。

1. 渲染模块

function render(vnode) {
  if (typeof vnode.tag === 'string') {
    return document.createElement(vnode.tag)
  } else {
    return createElement(vnode.tag, vnode.props)
  }
}

function createElement(tag, props) {
  const element = document.createElement(tag)
  for (const key in props) {
    element.setAttribute(key, props[key])
  }
  return element
}

2. 响应式模块

class Dep {
  constructor() {
    this.subs = []
  }

  depend() {
    this.subs.push(Dep.target)
  }

  notify() {
    this.subs.forEach(sub => sub())
  }
}

Dep.target = null

class Observer {
  constructor(data) {
    this.data = data
    this.walk(data)
  }

  walk(data) {
    for (const key in data) {
      defineReactive(data, key)
    }
  }
}

function defineReactive(data, key) {
  const dep = new Dep()
  Object.defineProperty(data, key, {
    get() {
      dep.depend()
      return data[key]
    },
    set(newVal) {
      data[key] = newVal
      dep.notify()
    }
  })
}

3. 应用入口

const app = new Vue({
  data: {
    count: 0
  },
  render(h) {
    return h('div', {
      onClick: () => { this.count++ }
    }, `count: ${this.count}`)
  }
})

app.$mount('#app')