vue3 中使用$nextTick,$set

在Vue 3中，`$nextTick` 和 `$set` 是两个重要的响应式API，它们分别用于处理数据更新后的异步渲染和属性设置。

1. `$nextTick`：
- **用途**：`$nextTick` 是在当前任务队列执行完毕后，同步执行回调函数。这对于处理依赖视图更新的操作非常有用，比如在组件内部改变状态后，你需要确保在下一次DOM渲染完成后再进行某些操作，避免出现先修改状态再触发渲染可能导致的闪烁现象。
- **用法示例**：

   this.value = newValue;
   this.$nextTick(() => {
     // DOM 更新已经完成，可以在此执行依赖于DOM的操作
     console.log(this.$el.textContent);
   });

2. `$set`：
- **用途**：`$set` 是 Vue 的深度响应式赋值方法，它主要用于在运行时添加或修改已观测到的对象的属性，这有助于在不触发重新计算（re-render）的情况下，实现对复杂对象深层次属性的更新，避免`Object.defineProperty`导致的性能问题。
- **用法示例**：

   this.obj = {}; // 如果直接 obj.newProperty = 'value'，不会触发更新
   this.$set(this.obj, 'newProperty', 'value');

- **注意事项**：当你需要修改一个已观测对象的不可变属性（如数组的索引或基本类型），你应该使用`$set`而不是直接赋值，因为Vue 会跟踪原始值的更改。