vue里的渲染以及computed的好处

Posted dangdanghepingping

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue里的渲染以及computed的好处相关的知识,希望对你有一定的参考价值。

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

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

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

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

 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的好处的主要内容,如果未能解决你的问题,请参考以下文章

Vue的计算属性

从源码的角度分析vue computed的依赖搜集

使用带有渲染功能的 Vue.js 3 片段

Vue2 解决computed返回值未能渲染到DOM的问题

Vue2 解决computed返回值未能渲染到DOM的问题

vue中axios请求成功了如何把数据渲染到页面上?