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

最新推荐文章于 2025-03-18 07:38:41 发布

原创最新推荐文章于 2025-03-18 07:38:41 发布 · 156 阅读

0 ·

CC 4.0 BY-SA版权

本文通过实例对比了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>