vue中$set和$nextTick的区别

在Vue中，$set和$nextTick是两个常用的方法，用于处理数据响应和DOM更新的问题。

1. $set方法：Vue通过数据劫持来追踪变化，但是对于新增的属性或者数组索引的修改，Vue无法自动追踪变化。这时候可以使用$set方法来实现响应式地设置属性或数组索引。$set接收三个参数，分别是目标对象、属性名（或索引）和属性值。

例子：

// 初始化data
data: {
  obj: {
    name: 'Tom',
    age: 18
  },
  arr: [1, 2, 3]
}

// 使用$set添加新属性
this.$set(this.obj, 'gender', 'male');

// 使用$set修改数组索引的值
this.$set(this.arr, 0, 100);

2. $nextTick方法：Vue在更新DOM时是异步执行的，所以直接在数据变化后去访问DOM可能获取到的是旧值。$nextTick方法可以在下次DOM更新循环结束后执行回调函数，确保DOM已经更新完毕。

例子：

// 更新数据
this.message = 'Hello, Vue!';

// 在下次DOM更新循环结束后执行回调函数
this.$nextTick(() => {
  // DOM已经更新完毕，可以访问新值
  console.log(this.$refs.myElement.textContent);
});

总结：
- $set方法用于在响应式对象中添加新属性或修改数组索引的值。
- $nextTick方法用于在DOM更新循环结束后执行回调函数，确保访问到最新的DOM。