vue底层原理实现

Vue 的响应式原理

Vue 的响应式系统是其核心特性之一，通过数据劫持和依赖收集实现。当数据变化时，视图自动更新。

Object.defineProperty Vue 2.x 使用 Object.defineProperty 劫持对象的属性访问和修改。通过 getter 收集依赖（Watcher），在 setter 中触发更新。

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      console.log('get', key);
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        console.log('set', key);
        val = newVal;
      }
    }
  });
}

Proxy Vue 3.x 改用 Proxy 实现响应式，解决了 Vue 2.x 对数组和新增属性的监听限制。

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      console.log('get', key);
      return Reflect.get(target, key);
    },
    set(target, key, val) {
      console.log('set', key);
      return Reflect.set(target, key, val);
    }
  });
}

虚拟 DOM 与 Diff 算法

Vue 通过虚拟 DOM 优化渲染性能，减少直接操作真实 DOM 的开销。

虚拟 DOM 结构 虚拟 DOM 是轻量化的 JavaScript 对象，描述 DOM 结构。

const vnode = {
  tag: 'div',
  props: { id: 'app' },
  children: [
    { tag: 'span', children: 'hello' }
  ]
};

Diff 算法 Diff 算法比较新旧虚拟 DOM 的差异，最小化 DOM 操作。采用同层比较策略，通过 patch 函数更新。

function patch(oldVnode, newVnode) {
  if (oldVnode === newVnode) return;
  const el = oldVnode.el;
  if (sameVnode(oldVnode, newVnode)) {
    patchProps(el, oldVnode.props, newVnode.props);
    patchChildren(el, oldVnode.children, newVnode.children);
  } else {
    replaceVnode(el, newVnode);
  }
}

模板编译

Vue 的模板通过编译器转换为渲染函数，最终生成虚拟 DOM。

编译流程

1. 解析模板为 AST（抽象语法树）。
2. 优化 AST（标记静态节点）。
3. 生成渲染函数代码。

const ast = parse(template);
optimize(ast);
const code = generate(ast);

渲染函数示例 模板 <div>{{ msg }}</div> 编译为：

function render() {
  return h('div', this.msg);
}

组件化实现

Vue 的组件是独立的模块，通过选项对象定义，支持生命周期和数据通信。

组件定义 组件通过 Vue.component 或单文件组件（SFC）定义。

Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  data() {
    return { message: 'Hello' };
  }
});

生命周期钩子 组件从创建到销毁的各个阶段触发钩子函数，如 created、mounted 等。

export default {
  created() {
    console.log('Component created');
  },
  mounted() {
    console.log('Component mounted');
  }
};

事件系统

Vue 的事件系统基于发布-订阅模式，支持组件间通信。

自定义事件 通过 $emit 触发事件，$on 监听事件。

// Parent
this.$on('event', handler);

// Child
this.$emit('event', payload);

事件总线 全局事件总线用于跨组件通信。

const bus = new Vue();
bus.$emit('global-event');
bus.$on('global-event', callback);

总结

Vue 的底层实现结合了响应式数据绑定、虚拟 DOM、模板编译和组件化设计。Vue 2.x 基于 Object.defineProperty，Vue 3.x 升级为 Proxy，性能与功能均有显著提升。理解这些原理有助于更好地使用 Vue 并解决开发中的问题。