VUE - v-cloak指令

477 阅读1分钟

v-cloak指令的作用

  {{}}插值表达式在更新时有闪烁问题且会闪现出插值表达式也就是双花括号,浏览器卡顿时表现尤为明显,v-cloak指令的作用就是解决这一问题的。

  闪烁问题出现的原因是Vue对插值表达式的解释机制首先是将整个插值表达式渲染到页面后再迅速地将其替换成插值表达式中的内容,在用户体验上就表现为闪烁且当浏览器卡顿时用户就会看到插值表达式的原型也就是双花括号。

v-cloak指令的使用方法

  官网API:cn.vuejs.org/v2/api/#v-c…

  这里样式中的方括号是属性选择器。

  使用了v-cloak指令以后,更新时文本依然会闪烁但双花括号不再会显现。

  解决问题的原理是,先通过样式隐藏内容,然后在内存中进行值的替换,替换好之后再显示最终的结果。