$nextTick无感刷新实现代码
时间: 2023-10-17 07:03:55 浏览: 32
下面是一个简单的使用`nextTick`实现无感刷新的示例代码:
```html
<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
<button @click="addItem">Add Item</button>
</div>
</template>
<script>
export default {
data() {
return {
items: [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }],
};
},
methods: {
addItem() {
const newItem = { id: Date.now(), name: `Item ${this.items.length + 1}` };
this.items.push(newItem);
this.$nextTick(() => {
// 在DOM更新后执行的代码
console.log('Items updated');
});
},
},
};
</script>
```
在上面的代码中,我们使用了`nextTick`方法来确保在DOM更新后执行一些代码。当我们点击`Add Item`按钮时,会向`items`数组中添加一个新的对象,并且在DOM更新后打印出`Items updated`。这个方法可以确保我们在添加新项目后立即看到更新,而不必等待DOM刷新完成。