如果vue里的某个methods函数执行,导致页面重新渲染,那么所有页面渲染相关的methods函数会重新执行以及时的渲染页面

但是大量函数的重新没有必要的执行会导致性能的下降,

此时如果把没有必要再次执行的方法定义到computed里,那么这些没有必要执行的方法就不会被渲染页面时候执行。

只有在computed函数所依赖的数据变化时候才会被执行

并且将结果会存在缓存里,每次环境改变只会执行一次,不会像methods里的方法一样每次遇到都执行

  1. <div id="app">
  2. <div></div>
  3. <p>{{num}}</p>
  4. <p>{{showName}}</p>
  5. <p>{{name}}</p>
  6. <button v-on:click='add'>add</button>//点击此按钮,add在methods里,会导致页面被重新渲染,所有页面需要的函数都会重新执行一遍,但computed里的函数不会执行
  7. <button v-on:click='changeName'>name</button>//点击此按钮,是否会导致页面重新渲染??是否会引起methods里函数执行
  8.  
  9. </div>
  10. <script src="vue.js"></script>
  11. <script>
  12. var vm = new Vue({
  13. el:"#app",
  14. data:{
  15. name:'aaa',
  16. num:0
  17. },
  18. methods:{
  19.  
  20. add:function(){
  21. this.num ++
  22. },
  23. changeName:function(){
  24. this.name = this.name+'a'
  25. }
  26. },
  27. computed:{
  28. showName:function(){
  29. alert('showName执行了')
  30. return this.name
  31. },
  32.  
  33. },
  34.  
  35. })
  36. </script>
  • computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化,举例:购物车里面的商品列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择

vue里的渲染以及computed的好处的更多相关文章

  1. vue里的watch 和 computed 监听的不同

    1.computed里是偏向于通过监听data里的值变化后,经过运算返回一个新的计算结果, 所以k不能与data里的k重名,并且必须有return, 能够缓存,依赖的值不变化不会进行重复计算: 而wa ...

  2. Egg + Vue 服务端渲染工程化实现

    在实现 egg + vue 服务端渲染工程化实现之前,我们先来看看前面两篇关于Webpack构建和Egg的文章: 在 Webpack工程化解决方案easywebpack 文章中我们提到了基于 Vue ...

  3. vue + element 动态渲染、移除表单并添加验证

    博客地址:https://ainyi.com/66 又接到新需求了吧~~ 背景 在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加.移除表单,更加个性化的效果. 常见于填写个人信息.附加内 ...

  4. vue服务端渲染添加缓存

    缓存 虽然 Vue 的服务器端渲染(SSR)相当快速,但是由于创建组件实例和虚拟 DOM 节点的开销,无法与纯基于字符串拼接(pure string-based)的模板的性能相当.在 SSR 性能至关 ...

  5. 浅谈Vue中计算属性(computed)和方法(methods)的差别

    浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...

  6. 了解vue里的Runtime Only和Runtime+Compiler

    转自:了解vue里的Runtime Only和Runtime+Compiler 扩展文章:Vue 2.0如何仅使用Runtime-only Build构建项目? 可以看到有两种版本: Runtime ...

  7. vue服务端渲染axios预取数据

    首先是要参考vue服务端渲染教程:https://ssr.vuejs.org/zh/data.html. 本文主要代码均参考教程得来.基本原理如下,拷贝的原文教程. 为了解决这个问题,获取的数据需要位 ...

  8. vue之v-text渲染多值

    其原理,是利用vue里的computed计算属性来做. 请看代码: <div id='app'> <div v-text="newUsers"></d ...

  9. vue服务端渲染提取css

    vue服务端渲染,提取css单独打包的好处就不说了,在这里主要说的是抽取css的方法 要从 *.vue 文件中提取 CSS,可以使用 vue-loader 的 extractCSS 选项(需要 vue ...

随机推荐

  1. layui常见问题记录

    1.用js选中checkbox,没有效果 解决方式:加入 form.render(); 重新渲染表单 $(this).prop('checked', true); //在新版本的jquery中,如果是 ...

  2. urllib 报错 IOError: [Errno socket error] TLS/SSL connection has been closed (EOF) (_ssl.c:590)

    解决方案: My evil workaround (don't do this in production!): import urllib2 #也可以是urllib import ssl ctx = ...

  3. golang 特殊知识点

    golang 代码不需要分号; 但是又会自己在底层增加;号 ,所以 golang的{左花括号必须在代码的最后一行,而不能在新的一行; golang 代码组织里需要注意 vendor 和 interna ...

  4. java新特性

    第一章:java8新特性 1.1 lambda表达式 1.2 Stream API 1.3 java8新特性总结 第二章:java9新特性 2.1 mac下多版本jdk的安装和管理 第三章:java1 ...

  5. vue项目启动时将localhost替换成指定ip地址

    1.node启动vue项目时地址一般都是http://localhost:8080 2.config->index.js 中的host:‘localhost’换成host:‘你的本机ip’就可以 ...

  6. RabbitMQ 可靠投递

    RabbitMQ 可靠投递 标签: RabbitMQ shovel-plugin ConfirmCallback RabbitMQ消息投递 背景 confirmCallback 确认模式 return ...

  7. [Python设计模式] 第16章 上班,干活,下班,加班——状态模式

    github地址:https://github.com/cheesezh/python_design_patterns 题目 用代码模拟一天的工作状态,上午状态好,中午想睡觉,下午渐恢复,加班苦煎熬. ...

  8. windows10开启wst子系统

    需求描述: 在玩docker发现需要linux运行玩转,直接在vmware虚拟机上跑 ,性能有损耗.想直接在windows下运行docker 问题解决: windows10的wst子系统可以安装lin ...

  9. IoC之AutoFac(一)——简单使用和组件注册

    阅读目录 一.AutoFac简单使用 二.注册 2.1 注册方式 2.2 带参数注册 回到顶部 一.AutoFac简单使用 1 namespace AutofacDemo 2 { 3 class Pr ...

  10. Mosquitto --topic

    订阅树的概念        Mosquitto通过订阅树的方式来管理所有的topic以及客户端的订阅关系,它首先将所有的topic按照/分割并组织成一棵树结构,从根节点到树中的每个节点即组成该节点所对 ...