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 })

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

原文地址:https://www.cnblogs.com/jack-wangsir/p/12580417.html

时间: 2024-09-30 06:15:54

Vue中控制更新的方式的相关文章

横冲直撞vue(第四篇):v-model、指令系统总结、指令系统示例轮播图实现、指令系统示例跑马灯效果实现、在vue中使用样式的方式

一. v-model v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素. 尽管有些神奇,但v-model本质上不过是语法糖.它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理. v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件: text 和 textarea 元素使用 value 属性和 input 事件: checkbox

Vue 中视图更新

当vue的data中的值发生变化后,视图中引用部分的值是否会同时发生变化呢?首先,我们要知道有哪些更新的类型. 更新的类型 1.直接赋值更新.this.heros=[' '],模板会立即更新. 2.通过函数更新.this.heros.push("xx). 更新的函数: push():在数组最后添加元素: pop():删除最后一个元素: shift():删除最后一个元素: unshift():在开头添加一个元素: splice():可以增加.修改.删除元素.splice函数使用方法:其需要传递开始

vue中数组更新视图不响应问题

数组更新注意事项 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue当你修改数组的长度时,例如:vm.items.length = newLength 举个例子: var vm = ne

vue中控制input获取焦点

遇到一个任务需要实现直接点击内容来编辑,光标离开Input就保存内容 点击内容实现下面这种获取点击表格内input光标 我找了下,有ref和自定义指令两种,我选了比较适合的ref来操作 ref在循环外和循环中被获取到的是两种状态,当有多个ref相同时,通过this.$refs.ref获取循环外的ref只会获取到最后一个元素,在循环中会获取到所有相同ref元素的数组. 所以我给了所有input相同的ref再通过点击使用index来使目标input获取焦点:this.$refs.ref[index]

详解Vue中的nextTick

Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一.示例 先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用. //模板 <div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="msg1

vue中如何不通过路由直接获取url中的参数

前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接在url后面拼接?mid=100的方式传递参数更灵活,你不需要设置路由,只需要在url后拼接参数即可,但是这种方式就需要通过javascript获取并提取url中的参数,通过传统的方式直接在页面中获取是行不通的了,因为vue中是无法通过location.search()来获取url问号之后的内容的.

Vue中nextTick的正确使用

什么是Vue.nextTick() 官方文档解释如下: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 获取更新后的DOM言外之意就是什么操作需要用到了更新后的DOM而不能使用之前的DOM或者使用更新前的DOM或出问题,所以就衍生出了这个获取更新后的DOM的Vue方法.所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码. <div class="app"> <div ref=

横冲直撞vue(第三篇):vue中template的三种写法、v-bind、v-on、更新元素的指令v-text与v-html、条件渲染指令v-if 与v-show、v-for

一.vue中template的三种写法 第一种(字符串模板写法): 直接写在vue构造器里,这种写法比较直观,适用于html代码不多的场景,但是如果模板里html代码太多,不便于维护,不建议这么写. <body> <div id="app"></div> <script src="./lib/vue.js"></script> <script type="text/javascript&qu

android开发之在activity中控制另一个activity的UI更新

转自:http://blog.csdn.net/jason0539/article/details/18075293 第一种方法: 遇到一个问题,需要在一个activity中控制另一个acitivity做一些更新,没想到传递handler的方法,通过以下方式解决. 1.在MyAPP中定义属性handler 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 package jason.com;     import jas