Vue computed 和 watch

编程小黎

于 2021-08-23 22:12:03 发布

阅读量83

点赞数 1

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_52807480/article/details/119878895

笔记专栏收录该内容

10 篇文章

订阅专栏

本文探讨了Vue.js中计算属性与方法的区别和应用场景。计算属性提供缓存，仅在相关数据变化时更新，适用于简单计算。而方法每次调用都会执行，适合需要额外操作或多次调用的场景。同时，文章介绍了Vue的监听器功能，当数据变化时自动触发相应处理。

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

计算属性简化插值表达式
       可以将计算过程保存到计算属性中

       {{reverseStr}}
       {{reverseStrA()}}

methods:{
// 计算方法
   reverseStrA(){
       console.log("我是计算方法的调用");
           return this.msg.split('').reverse().join('')
}
},

定义计算属性与方法的区别
1.计算属性有缓存的操作，只执行一次，效率更高
2.计算属性调用时只需要写属性名称
3.每次调用方法时都会执行，没有缓存操作
4.调用方法时需要();
computed:{
// 必须有返回值
reverseStr(){
console.log("计算属性");
   return this.msg.split('').reverse().join('')
       }
   }

// 定义监听器自动调用
               watch:{
                   // 当数据发生变化时，就会触发监听器的函数，必须传递参数到监听器中
                   firstName(value){
                       // console.log(value);
                       this.fullName = value +this.lastName
                   },
                   lastName(value){
                       this.fullName = this.firstName + value
                   }
               },