vue未跟踪的是什么

在Vue.js中，未跟踪的主要是：1、原生DOM操作，2、某些JavaScript对象类型（如Map、Set），3、异步操作。这些部分的变动不会被Vue的反应式系统自动捕捉和更新。 这意味着当这些部分发生变化时，Vue并不会自动重新渲染组件或视图。为了确保这些变化被捕捉到，开发者需要采取额外的措施，如手动触发更新或使用Vue的特定方法。

一、原生DOM操作

原生DOM操作是指直接使用JavaScript对DOM进行修改，而不是通过Vue模板或指令来进行。这些操作不会被Vue的反应式系统跟踪，因此需要开发者手动处理更新。

示例：

document.getElementById('myElement').innerText = 'New Content';

解决方法：

使用Vue的指令（如v-if、v-show）或绑定数据来动态更新DOM。
```
<div v-if="isVisible">Content</div>
```

二、某些JavaScript对象类型

Vue的反应式系统无法自动跟踪一些特殊类型的JavaScript对象，例如Map和Set。这些类型的变化不会触发Vue的重新渲染。

示例：

const myMap = new Map();
myMap.set('key', 'value');

解决方法：

使用Vue提供的特定方法，例如Vue.set()或使用普通对象来替代这些类型。
```
this.$set(this.myObject, 'key', 'value');
```

三、异步操作

异步操作（如setTimeout、setInterval、Promise）在Vue中不会自动触发重新渲染，因为这些操作在不同的事件循环中执行。

示例：

setTimeout(() => {
  this.dataProperty = 'New Value';
}, 1000);

解决方法：

确保在异步操作完成后，手动触发更新或使用Vue的内置方法来更新数据。
```
this.$nextTick(() => {
  this.dataProperty = 'New Value';
});
```

四、数组的直接操作

对数组的直接操作（如通过索引直接修改数组元素）不会被Vue的反应式系统自动捕捉。

示例：
```
this.items[0] = 'New Item';
```
解决方法：

使用Vue提供的数组方法，如Vue.set()、push()、splice()等。
```
this.$set(this.items, 0, 'New Item');
```

五、未初始化的对象属性

Vue无法跟踪未初始化的对象属性的变化，这意味着在运行时添加的新属性不会触发视图更新。

示例：

this.myObject.newProperty = 'New Value';

解决方法：

在对象创建时初始化所有可能需要的属性，或者使用Vue.set()添加新属性。
```
this.$set(this.myObject, 'newProperty', 'New Value');
```

六、总结与建议

总结来说，Vue未跟踪的主要是原生DOM操作、某些JavaScript对象类型（如Map、Set）、异步操作、数组的直接操作以及未初始化的对象属性。为了确保这些变化被捕捉到，我们可以：

避免直接操作DOM，使用Vue的指令和数据绑定。
对于Map和Set等特殊对象类型，考虑使用普通对象或Vue的特定方法。
对于异步操作，确保在操作完成后手动触发更新。
使用Vue提供的数组方法来操作数组。
在对象创建时初始化所有需要的属性，或使用Vue.set()添加新属性。

通过这些措施，可以确保Vue的反应式系统能够捕捉到所有的变化，从而保持视图的同步更新。