Vue中控制更新的方式
一. 强制更新的实例方法 vm.$forceUpdate()
迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。
在没有留意到数组或对象的变更检测注意事项,或者你可能依赖了一个未被 Vue 的响应式系统追踪的状态。
然而,如果你已经做到了上述的事项仍然发现在极少数的情况下需要手动强制更新,那么你可以通过 $forceUpdate
来做这件事。
二. 通过 v-once
创建低开销的静态组件
渲染普通的 HTML 元素在 Vue 中是非常快速的,但有的时候你可能有一个组件,这个组件包含了大量静态内容。在这种情况下,你可以在根元素上添加 v-once
attribute 以确保这些内容只计算一次然后缓存起来,比如:
Vue.component('terms-of-service', {
template: `
<div v-once>
<h1>xxx</h1>
... a lot of static content ...
</div>
`
})
试着不要过度使用这个模式。当你需要渲染大量静态内容时,极少数的情况下它会给你带来便利,除非你非常留意渲染变慢了,不然它完全是没有必要的——再加上它在后期会带来很多困惑。
Vue中控制更新的方式的更多相关文章
- 小白都能看懂的vue中各种通信传值方式,附带详细代码
1.路由通信传值 路由通信是通过路由跳转用query把参数带过去,也是vue常用的通信手段. 例子: 创建并在路由注册一个组件Head <template> <div id=&quo ...
- VUE中v-for更新检测
口诀: 数组变更方法,就会导致 v-for 更新,页面更新 数组非变更方法:返回新数组,就不会导致 v-for 更新,更新值检测不到可采用覆盖或者 this.$set() 数组变更方法如下: 1. a ...
- vue中定时器的使用方式
就这么搞定 no no no 离开页面的时候还必须清楚定时器
- Vue中两种传值方式
第一种:通过url传参,直接在地址后加? ,通过this.$route.query对象获取 第二种:通过路由传参,修改路由,通过this.$route.params对象获取
- Vue中图片的加载方式
一.前言 VUE项目中图片的加载是必须的,那么vue中图片的加载方式有哪些呢,今天博主就抽点时间来为大家大概地捋一捋. 二.图片的加载方法 1.在本地加载图片(静态加载) 图片存放assets文件夹中 ...
- vue中Axios的封装和API接口的管理
前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...
- 【转】简单理解Vue中的nextTick
前言: Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick ...
- 简单理解Vue中的nextTick
Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一. ...
- 详解Vue中的nextTick
Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一. ...
随机推荐
- Codeforces Round #626 D. Present
D. Present 题目大意:给你一个大小是n的序列,求两两之间相加进行异或之后的答案. 这个题目我并没有想到怎么写,有点偷懒于是就去看了题解.. 题解很套路... 题解: 因为这个是用到了异或,所 ...
- 2019-2020Nowcoder Girl初赛 题解
题目都不是很难,就是最后一题有点毒瘤 第一题:牛妹爱整除 这个你把一个进制数进行拆分,拆分成若干位,然后在取模,这样会发现如果是x进制的数,那么对x+1这个进制转化即满足条件. 举个例子:一个x进制数 ...
- 09_CSS入门和高级技巧(7)
浏览器兼容问题 1.现在中国网民用什么浏览器? 中国流量最大的网站就是百度,百度在统计着每一个访问者的浏览器.地域.操作系统.分辨率等等信息. 百度流量研究院:http://tongji.baidu. ...
- 推荐算法_CIKM-2019-AnalytiCup 冠军源码解读_2
最近在为机器学习结合推荐算法的优化方法和数据来源想办法.抱着学习的态度继续解读19-AnalytiCup的冠军源码. 第一部分itemcf解读的连接:https://www.cnblogs.com/m ...
- 【matlab 基础篇 03】一文带你全面了解 plot 绘图函数的使用(超详细+图文并茂)
快速入门matlab,系统地整理一遍,如何你和我一样是一个新手,那么此文很适合你: 文章目录 1 前言 2 plot 2.1 显示正弦波 2.2 修改颜色 2.3 修改点的形状 2.4 修改线的形状 ...
- Vue3语法快速入门以及写一个倒计时组件
Vue3写一个倒计时组件 vue3 beta版本发布已有一段时间了,文档也大概看了一下,不过对于学一门技术,最好的方法还是实战,于是找了一个比较简单的组件用vue3来实现,参考的是vant的count ...
- [hdu2119]二分图最小覆盖,最大匹配
题意:给一个01矩阵,每次可以选一行或一列,打掉上面所有的1,求打掉所有的1所需的最小次数. 思路:经典的模型了,二分图最小覆盖=最大匹配.所谓最小覆盖是指选最少的点关联所有的边.容易得到将行和列看成 ...
- C# 数据操作系列 - 5. EF Core 入门
0.前言 上一章简单介绍了一下ORM框架,并手写了一个类似ORM的工具类.这一章将介绍一个在C#世界里大名鼎鼎的ORM框架--Entity Framework的Core版. Entity Framew ...
- 自动扫雷 python
自动扫雷一般分为两种,一种是读取内存数据,而另一种是通过分析图片获得数据,并通过模拟鼠标操作,这里我用的是第二种方式. // 2018.8.10更新 代码已上传至GitHub https://gith ...
- net core中Vue.component单独一个文件不运行,不报错的处理
Vue.component代码段原先是放到view下的cshtml中的,可以正常运行,后来为了方便代码管理,将这块代码块单独放到一个js文件中,结果点击按钮等等都没有任何反应了,同时js控制台也不报错 ...