计算属性，方法，侦听的区别与用法

最新推荐文章于 2025-07-06 22:47:46 发布

原创最新推荐文章于 2025-07-06 22:47:46 发布 · 376 阅读

0 ·

CC 4.0 BY-SA版权

本文通过实例对比了Vue中的计算属性、方法和侦听器的使用场景和区别。计算属性在依赖的数据变化时才会重新计算，而方法每次被调用都会执行。侦听器则用于响应数据变化并执行特定任务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
   <title>计算属性，方法，侦听的区别与用法</title>
   <meta charset="utf-8">
   <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
   <div id="app">
       
       {{fullName}}
       {{age}}
   </div>
</body>
<script type="text/javascript">
    //用计算符号+拼接;
    //methods方法，里面的data任意数值有改变的时候，也是执行的,不改变不执行；
    //computed属性:里面的data数值只是跟它属性相关有改变的时候，是执行的,不改变不执行;
    //用watch；需要在data定义一个属性，它跟computed一样，
    //选择的时候，先选择computed在选择watch;
    var app=new Vue({
        el:"#app",
        data:{
            msg:"张三",
            age:27,
            firstName:"张",
            lastName:"李",
            fullName:"掌灸"
            //fullName:""//这个名字的合并呢？

        },
        watch:{
            firstName:function(){
                console.log("计算一次");
                return this.fullName=this.firstName+""+this.lastName;
            },
            lastName:function(){
                console.log("计算一次");
                return this.fullName=this.firstName+""+this.lastName;
            }
        }
        //计算
        /*computed:{
            fullName:function(){
                console.log("执行两次");
                return this.firstName+""+this.lastName;
            }
        }*/
        //方法
        /*methods:{
            fullName:function(){
                console.log("计算了一次");
                return this.firstName+""+this.lastName;
            }
        }*/
    })

</script>
</html>