计算属性、方法和监听

佚名 6年前 (2019-05-09) 随笔 2177人围观抢沙发百度已收录

计算属性 ：有缓存机制，当计算属性不改变的时候计算属性方法不执行。fullName的值由firstName和lastName通过计算属性得到。只有改变firstName或lastName计算属性才会执行，当改变age值不会执行计算。

1  <div id="app">
2         {{fullName}}
3         {{age}}
4     </div>

 1 <script>
 2         var Vm=new Vue({
 3             el:"#app",
 4             data:{
 5                 firstName:"Hello",
 6                 lastName:"world",
 7                 age:28,
 8 
 9             },
10             computed:{
11                 fullName:function () {
12                      console.log("执行计算");
13                    return this.firstName+" "+this.lastName;
14                  },
15              }
16         })
17     </script>

从执行结果可以看到，当我们改变age的值得时候计算属性是不会执行。当改变firstName时执行计算属性，打印‘执行计算’。

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

方法  :没有缓存机制。  只要页面重新渲染，就执行方法。插值表达式是{{fullName()}}

<div id="app">
        {{fullName()}}
        {{age}}
    </div>

<script>
        var Vm=new Vue({
            el:"#app",
            data:{
                firstName:"Hello",
                lastName:"world",
                age:28,
            },
            methods:{
                fullName:function () {
                    console.log("执行方法");
                    return this.firstName+" "+this.lastName;
                }
            }

        })
    </script>

可以看到无论是改变age还是firstName都会执行方法函数。

监听器：当firstName或lastName发生改变时会执行监听器函数

1 <div id="app">
2         {{fullName}}
3         {{age}}
4     </div>

 <script>
        var Vm=new Vue({
            el:"#app",
            data:{
                firstName:"Hello",
                lastName:"world",
                 fullName:"world hello ",
                age:28,
            },
            // 监听器：当firstName或lastName发生改变时会执行监听器函数
            watch:{
                firstName:function () {
                    console.log("执行了firstname监听");
                    this.fullName=this.firstName+" "+this.lastName;
                },
                lastName:function () {
                    console.log("执行了lastname监听");
                    this.fullName=this.firstName+" "+this.lastName;
                }
            },
        })
    </script>