watch监控路由 computed计算属性值区别和用法

最新推荐文章于 2025-05-30 09:08:25 发布

原创最新推荐文章于 2025-05-30 09:08:25 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#watch监控路由 computed计算属性值区别和用法

vue 专栏收录该内容

8 篇文章

订阅专栏

本文探讨了Vue.js中的watch和computed属性的区别。computed属性提供缓存的计算结果，仅在依赖数据变化时更新。而watch则用于监听数据变化，常用于执行复杂业务逻辑，结合了计算属性和方法的功能。文章详细介绍了它们的语法格式，并强调了使用计算属性时的注意事项，如不需加括号调用，依赖数据变化会触发重新计算，且结果会被缓存。

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

watch，computed区别

computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
methods方法表示一个具体的操作，主要书写业务逻辑；
watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；

语法格式

watch：

 watch: {
        '$route.path':function(newVal, oldVal){
          //console.log(newVal+'---'+oldVal);
          if (newVal==='/login') {
            console.log('欢迎进入登录页面')
            
          }else if(newVal==='/register'){
            console.log('欢迎进入注册页面')
            
          }
        }
      },

computed：

在 computed 中，可以定义一些属性，这些属性，叫做【计算属性】，计算属性的，本质，就是一个方法，只不过，我们在使用这些计算属性的时候，是把它们的名称，直接当作属性来使用的；并不会把计算属性，当作方法去调用；
注意1：计算属性，在引用的时候，一定不要加 () 去调用，直接把它当作普通属性去使用就好了；
注意2：只要计算属性，这个 function 内部，所用到的任何 data 中的数据发送了变化，就会立即重新计算这个计算属性的值
注意3：计算属性的求值结果，会被缓存起来，方便下次直接使用；如果计算属性方法中，所以来的任何数据，都没有发生过变化，则，不会重新对计算属性求值；

   computed: { 

      
        'fullname': function () {
          console.log('ok')
          return this.filstname + '-'+this.middlename+'-'+  this.lastname
          }
        }