vue里的渲染以及computed的好处

Posted 2021-01-29 dangdanghepingping

如果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属性来进行计算是最好的选择