手把手教你VUE从入门到放弃—— 篇 八(vue的计算属性,方法和监听器的使用方法与比较)

vue

语法:

计算属性:computed:{

                 变量名:function (){

                    ...处理

                     return 返回值;

                 }

             }

方法:

  methods:{

                 方法名:function(){

                    ...处理

                   可返回值也可以不返回

                 }

             }

监听器

watch:{

                 被监听属性:function(){

                    属性改变时处理...

                }

代码如下:想看结论直接往下拉

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue的计算属性,方法,监听器</title>

      <script src="vue.js"></script>

</head>

<body>

    <div id = 'app2'>

        <h1>{{num1}}</h1>

        <h1>{{num2}}</h1>

        <h1>{{numz}}</h1>

        <h1>{{total}}</h1>

        <h1>{{total1()}}</h1>

        <h1>{{total2}}</h1>

    </div>

    <script>

        var app = new Vue({

            el:'#app2',

            data:{

                num1:0,

                num2:0,

                numz:666,

                total2:0,

                },

            //计算属性返回值实现

             computed:{

                 total:function (){

                     

                     console.log("计算了一次1");

                     return this.num1+this.num2;s

                 }

             },

             //方法实现

             methods:{

                 total1:function(){

                     console.log("计算了一次2");

                     return this.num1 + this.num2;

                 }

             },

             //监听器实现

             watch:{

                 num2:function(){

                     console.log("计算了一次3");

                    this.total2 = this.num1+this.num2;

                },

                num1:function(){

                    console.log("计算了一次3");

                    this.total2 = this.num1+this.num2;

                }

        },

        });

    </script>

</body>


</html>

页面效果与测试如下

结论:

刚加载页面的时候调用了方法与计算属性 

修改了无关变量时,因为计算属性与监听有缓存而方法没有,所以

修改了相关变量时,缓存重置,重新计算

由此可以看出此场景时 计算属性最好用,既简洁又有缓存

以上是 手把手教你VUE从入门到放弃—— 篇 八(vue的计算属性,方法和监听器的使用方法与比较) 的全部内容, 来源链接: utcz.com/z/374918.html

回到顶部