Vue中详细解析哪些常用开发方法？

本文共计848个文字，预计阅读时间需要4分钟。

目录：$nextTick()、$forceUpdate()、$set().sync - 2.3.0 新增（Vue 3.x 中 v-model 已被替换，不再支持）

总结：$nextTick() 将回调延迟到下次 DOM 更新循环之后执行，在修改数据之后立即使用它。

目录

• $nextTick()
• $forceUpdate()
• $set()
• .sync——2.3.0+ 新增（Vue 3.x中已被v-model替换，不再支持）
• 总结

$nextTick()

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

使用场景
在一些情况下，变量进行了初始赋值或更新，但是DOM还未更新完成时，使用变量的值是不起作用的。此时就需要通过this.$nextTick()等待DOM更新加载完成后立即进行使用。常用于created钩子函数中以及涉及到DOM更新的情况。
用法

this.$nextTick(() => { this.$refs.table.refresh(true)})

this.$nextTick()在页面交互，尤其是从后台获取数据后重新生成dom对象之后的操作有很大的优势

$forceUpdate()

迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。