vue计算属性和watch的区别是什么？

系统管理员 2023-02-22 05:24 7阅读 0赞

**vue中计算属性和watch的区别**

学习vue框架，一定少不了学习计算属性computed和watch

computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大，它可以让你的代码更加声明式、数据驱动并且易于维护。

watch监听的是你定义的变量，当你定义的变量的值发生变化时，调用对应的方法。

<div>{
       {Name}}</div>
    data(){
    return {
    num:0,
    lastname:'',
    firstname:'',
    }
    }
    //当num的值发生变化时，就会调用num的方法，方法里面的形参对应的是num的新值和旧值
    watch:{
    num:function(val,oldval){
        console.log(val,oldval);
    }
    },
    //计算属性computed,计算的是Name依赖的值,它不能计算在data中已经定义过的变量。
    computed:{
        Name:function(){
            return this.firstname+this.lastname;
        }
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70][]

转载：[vue计算属性和watch的区别是什么？][vue_watch]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200702003842494.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA==,size_16,color_FFFFFF,t_70
[vue_watch]: https://m.html.cn/qa/vue-js/18932.html