本文共 844 字，大约阅读时间需要 2 分钟。

Vue.js 开发指南

数据驱动原理

Vue.js 采用数据驱动的双向绑定机制，通过 Object.defineProperty 动态为数据对象添加 getter 和 setter 方法。当数据发生变化时，会触发 watcher（观察者）模式，实现组件重新渲染。

组件基础

Vue 的核心

• 核心开发者：尤雨溪
• 框架定位：渐进式框架，专注视图层
• 特点：允许通过简洁模板声明数据与 DOM 的绑定关系

数据绑定与状态管理

双向数据绑定

• 数据通过 VM（ViewModel）连接到视图层
• getter/setter 机制实现数据随时更新
• 观察者模式（Watcher）监听数据变化，触发视图更新

数组更新检测

• Vue 监控数组变更方法，包括 push、pop、shift 等
• 不会触发视图更新的方法：concat、slice
• 温馨提示：数组的逆序操作如 reverse 通常不会触发更新

事件修饰符

• 常用修饰符：stop（阻止冒泡）、prevent（取消默认行为）、self（仅在当前元素触发）、once（只执行一次）
• 示例：<button @click="handleClick">-

v-model 实现细节

• 内部实现：通过 input 事件绑定值
• 模型特性：
  • lazy：输入后才更新数据
  • number：支持数值格式化
  • trim：去除空格
• 示例：

计算属性与 watcher

• 计算属性：基于现有数据生成新的值，建立缓存
• watcher：单向数据绑定，仅监听一个变量
• 区别：
  • 计算属性支持多变量依赖
  • watcher 适用于耗时操作或多次数据变化

虚拟 DOM

• 内存中生成虚拟 DOM树
• 数据变化时，重新生成新虚拟 DOM树
• 对比旧 DOM 树，使用 diff 算法更新真实 DOM

浏览器渲染流程

数据层的实现细节

• 数据必须是函数：确保每个实例有独立拷贝
• 示例：const data = reactive({})

slot

转载地址：http://dzwwz.baihongyu.com/