vue里的渲染以及computed的好处
如果vue里的某个methods函数执行,导致页面重新渲染,那么所有页面渲染相关的methods函数会重新执行以及时的渲染页面
但是大量函数的重新没有必要的执行会导致性能的下降,
此时如果把没有必要再次执行的方法定义到computed里,那么这些没有必要执行的方法就不会被渲染页面时候执行。
只有在computed函数所依赖的数据变化时候才会被执行
并且将结果会存在缓存里,每次环境改变只会执行一次,不会像methods里的方法一样每次遇到都执行
<div id="app">
<div></div>
<p>{{num}}</p>
<p>{{showName}}</p>
<p>{{name}}</p>
<button v-on:click='add'>add</button>//点击此按钮,add在methods里,会导致页面被重新渲染,所有页面需要的函数都会重新执行一遍,但computed里的函数不会执行
<button v-on:click='changeName'>name</button>//点击此按钮,是否会导致页面重新渲染??是否会引起methods里函数执行 </div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
name:'aaa',
num:0
},
methods:{ add:function(){
this.num ++
},
changeName:function(){
this.name = this.name+'a'
}
},
computed:{
showName:function(){
alert('showName执行了')
return this.name
}, }, })
</script>
- computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化,举例:购物车里面的商品列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
vue里的渲染以及computed的好处的更多相关文章
- vue里的watch 和 computed 监听的不同
1.computed里是偏向于通过监听data里的值变化后,经过运算返回一个新的计算结果, 所以k不能与data里的k重名,并且必须有return, 能够缓存,依赖的值不变化不会进行重复计算: 而wa ...
- Egg + Vue 服务端渲染工程化实现
在实现 egg + vue 服务端渲染工程化实现之前,我们先来看看前面两篇关于Webpack构建和Egg的文章: 在 Webpack工程化解决方案easywebpack 文章中我们提到了基于 Vue ...
- vue + element 动态渲染、移除表单并添加验证
博客地址:https://ainyi.com/66 又接到新需求了吧~~ 背景 在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加.移除表单,更加个性化的效果. 常见于填写个人信息.附加内 ...
- vue服务端渲染添加缓存
缓存 虽然 Vue 的服务器端渲染(SSR)相当快速,但是由于创建组件实例和虚拟 DOM 节点的开销,无法与纯基于字符串拼接(pure string-based)的模板的性能相当.在 SSR 性能至关 ...
- 浅谈Vue中计算属性(computed)和方法(methods)的差别
浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...
- 了解vue里的Runtime Only和Runtime+Compiler
转自:了解vue里的Runtime Only和Runtime+Compiler 扩展文章:Vue 2.0如何仅使用Runtime-only Build构建项目? 可以看到有两种版本: Runtime ...
- vue服务端渲染axios预取数据
首先是要参考vue服务端渲染教程:https://ssr.vuejs.org/zh/data.html. 本文主要代码均参考教程得来.基本原理如下,拷贝的原文教程. 为了解决这个问题,获取的数据需要位 ...
- vue之v-text渲染多值
其原理,是利用vue里的computed计算属性来做. 请看代码: <div id='app'> <div v-text="newUsers"></d ...
- vue服务端渲染提取css
vue服务端渲染,提取css单独打包的好处就不说了,在这里主要说的是抽取css的方法 要从 *.vue 文件中提取 CSS,可以使用 vue-loader 的 extractCSS 选项(需要 vue ...
随机推荐
- Spring Boot 之httpClient使用
版权声明:本文为博主原创文章,转载时请在文章最前方附上本文地址. https://blog.csdn.net/qq_35033270/article/details/80112085 超文本传输协议( ...
- 替换空字符NULL(字符编码为0的字符)
老R3(非Unicode系统),发现读取出来的数据中有编码为0的字符,存文件后发现串行,所以需要先替换 DATA: str TYPE string. *str = zacct_12-txt+47. s ...
- 2.1 mac下多版本jdk的安装和管理
之前已经安装过jdk8了,安装路径:/Library/Java/JavaVirtualMachines/jdk1.8.0_144.jdk 现在安装jdk10,下载后,双击dmg文件一直到安装完成,安装 ...
- Javascript中页面加载完成后优先执行顺序
Javascript中页面加载完成后优先执行顺序 document优先于windowwindow优先于element //document加载完成执行方法体 document.addEventList ...
- alibaba的springcloud孵化器项目
Spring Cloud Alibaba 致力于提供微服务开发的一站式解决方案.此项目包含开发分布式应用微服务的必需组件,方便开发者通过 Spring Cloud 编程模型轻松使用这些组件来开发分布式 ...
- 发现一个强大的可视化第三方库pyecharts
pyecharts 目前尚在不断的更新中,值得重点研究和学习的图表库
- Visual Studio进行Web性能测试- Part I
Visual Studio进行Web性能测试- Part I 2012-08-29 08:01 by 知平软件, 5356 阅读, 9 评论, 收藏, 编辑 原文作者:Ambily.raj Visua ...
- GOF提出的23种设计模式是哪些 设计模式有创建形、行为形、结构形三种类别 常用的Javascript中常用设计模式的其中17种 详解设计模式六大原则
20151218mark 延伸扩展: -设计模式在很多语言PHP.JAVA.C#.C++.JS等都有各自的使用,但原理是相同的,比如JS常用的Javascript设计模式 -详解设计模式六大原则 设计 ...
- golang 类型转换
import ( "bytes" "encoding/binary" "encoding/gob" "fmt" ) fu ...
- 【Apache】Apache的安装和配置
Apache是世界非常流行的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一. Apache在Win7上的安装 下载apa ...