Vue中控制更新的方式

Posted jack-wangsir

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue中控制更新的方式相关的知识,希望对你有一定的参考价值。

一.  强制更新的实例方法   vm.$forceUpdate()

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

 

在没有留意到数组对象的变更检测注意事项,或者你可能依赖了一个未被 Vue 的响应式系统追踪的状态。

 

然而,如果你已经做到了上述的事项仍然发现在极少数的情况下需要手动强制更新,那么你可以通过 $forceUpdate 来做这件事。

二.   通过 v-once 创建低开销的静态组件

渲染普通的 html 元素在 Vue 中是非常快速的,但有的时候你可能有一个组件,这个组件包含了大量静态内容。在这种情况下,你可以在根元素上添加 v-once attribute 以确保这些内容只计算一次然后缓存起来,比如:

1 Vue.component(‘terms-of-service‘, {
2   template: `
3     <div v-once>
4       <h1>xxx</h1>
5       ... a lot of static content ...
6     </div>
7   `
8 })

试着不要过度使用这个模式。当你需要渲染大量静态内容时,极少数的情况下它会给你带来便利,除非你非常留意渲染变慢了,不然它完全是没有必要的——再加上它在后期会带来很多困惑。

 

 

以上是关于Vue中控制更新的方式的主要内容,如果未能解决你的问题,请参考以下文章

vue —— VSCode代码片段

vue —— VSCode代码片段

VSCode自定义代码片段——.vue文件的模板

vue中detele删除对象属性时视图不能响应更新 - 解决办法

VSCode自定义代码片段1——vue主模板

如何以编程方式通过 Main Activity 在 ViewPager 中更新刷新片段