Vue监视数据的原理和set()的使用

原创于 2025-07-25 10:14:34 发布 · 1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

在 Vue 中，Vue.set()（或 this.$set()）是用于解决响应式数据更新检测的重要方法，其底层与 Vue 的数据监视原理紧密相关。以下从使用场景和实现原理两方面详细说明：

一、Vue.set () 的使用场景与用法

1. 为什么需要 Vue.set ()？

Vue 的响应式系统通过 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现数据监听，但存在限制：

无法检测对象新增的属性或删除的属性；
无法检测数组通过索引修改元素或修改数组长度的操作。

此时，直接修改数据不会触发视图更新，需要用 Vue.set() 强制触发响应式更新。

2. 用法

语法：

// 全局方法
Vue.set(target, propertyName/index, value)

// 实例方法（组件内）
this.$set(target, propertyName/index, value)

参数：
- target：需要修改的响应式对象或数组（必须是已被 Vue 响应式系统劫持的对象）；
- propertyName/index：新增 / 修改的属性名（对象）或索引（数组）；
- value：对应的值。

3. 典型场景

给对象新增响应式属性：

data() {
  return {
    user: { name: '张三' }
  }
},
methods: {
  addAge() {
    // 直接新增属性，视图不会更新
    this.user.age = 20; // 无效
    
    // 使用 $set，视图会更新
    this.$set(this.user, 'age', 20); // 有效
  }
}

修改数组的指定元素：

data() {
  return {
    list: ['苹果', '香蕉']
  }
},
methods: {
  updateItem() {
    // 直接通过索引修改，视图不会更新
    this.list[1] = '橙子'; // 无效
    
    // 使用 $set，视图会更新
    this.$set(this.list, 1, '橙子'); // 有效
  }
}

二、Vue 监视数据的原理

Vue 实现数据响应式的核心是对数据进行劫持，并在数据变化时通知依赖更新视图。不同 Vue 版本的实现方式略有差异：

1. Vue 2 的响应式原理（Object.defineProperty）

初始化劫持：
当组件初始化时，Vue 会遍历 data 中的所有属性，通过 Object.defineProperty 为每个属性添加 getter 和 setter：
- getter：当属性被访问时触发，用于收集依赖（记录哪些视图 / 计算属性依赖该数据）。
- setter：当属性被修改时触发，用于通知依赖更新（触发视图重新渲染）。
局限性：
- 只能劫持初始化时已存在的属性，新增属性默认没有 getter/setter，因此无法被监测。
- 数组的 length 修改和索引赋值不会触发 setter（Vue 对数组的 7 个方法进行了重写，如 push、splice 等，这些方法会触发更新，但直接修改索引 / 长度不会）。

2. Vue 3 的响应式原理（Proxy）

初始化劫持：
Vue 3 使用 ES6 的 Proxy 对 data 对象进行代理，生成一个代理对象（Proxy）。Proxy 可以拦截对象的所有操作（包括新增属性、删除属性、索引访问等），从而解决了 Vue 2 的局限性。
优势：
- 能监测新增属性（proxy.xxx = value 会被 set 拦截）；
- 能监测删除属性（delete proxy.xxx 会被 deleteProperty 拦截）；
- 能监测数组索引修改和长度变化（通过 set 拦截）。

三、Vue.set () 的底层实现逻辑

Vue.set() 的核心作用是手动为数据添加响应式能力，并触发更新：

对于对象：
- 检查目标对象是否为响应式对象（是否有 __ob__ 标识，Vue 内部用于标记响应式对象）。
- 若属性已存在，则直接修改值并触发 setter。
- 若属性不存在，则通过 Object.defineProperty（Vue 2）或 Proxy 的 set 拦截（Vue 3）为新属性添加响应式，并手动触发依赖更新。
对于数组：
- 调用数组的 splice 方法（Vue 已重写该方法，会触发更新），通过 splice(index, 1, value) 实现元素修改，从而触发视图更新。

总结

Vue.set () 的作用：解决 Vue 响应式系统无法检测 “对象新增属性”“数组索引修改” 等操作的问题，强制为数据添加响应式并触发视图更新。
监视数据的原理：
- Vue 2 基于 Object.defineProperty 劫持属性的 getter/setter，实现依赖收集和更新通知。
- Vue 3 基于 Proxy 代理整个对象，拦截所有操作，天然支持更多场景的监测。

理解这一机制有助于避免 “数据修改后视图不更新” 的常见问题，也能更深入地掌握 Vue 响应式系统的设计思想。