vue2 中 computed 和 watch 的异同?

今天我来总结一下vue中computed 和 watch的异同!

一、computed 和 watch 都可以观察页面的数据变化。当处理页面的数据变化时,我们有时候很容易滥用watch。 而通常更好的办法是使用computed属性,而不是命令是的watch回调。
这里我直接引用vue官网的例子来说明:

html:

我们要实现 第三个表单的值 是第一个和第二个的拼接,并且在前俩表单数值变化时,第三个表单数值也在变化

<div id="myDiv">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <input type="text" v-model="fullName">
</div>

js: 用watch方法来实现

 new Vue({
  el: '#myDiv',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

js: 利用computed 来写

  new Vue({
       el:"#myDiv",
            data:{
                firstName:"Den",
                lastName:"wang",

            },
            computed:{
                fullName:function(){
                    return  this.firstName  + " " +this.lastName;
                }
            }
   })

很容易看出 computed 在实现上边的效果时,是更简单的。

二 、 详解 comouted 计算属性。
在vue的 模板内({{}})是可以写一些简单的js表达式的 ,很便利。但是如果在页面中使用大量或是复杂的表达式去处理数据,对页面的维护会有很大的影响。这个时候就需要用到computed 计算属性来处理复杂的逻辑运算。

1.优点:
在数据未发生变化时,优先读取缓存。computed 计算属性只有在相关的数据发生变化时才会改变要计算的属性,当相关数据没有变化是,它会读取缓存。而不必想 motheds方法 和 watch 方法是的每次都去执行函数。

2.setter 和 getter方法:(注意在vue中书写时用set 和 get)
setter 方法在设置值是触发。
getter 方法在获取值时触发。

computed:{
   fullName:{
    //这里用了es6书写方法
        set(){
             alert("set");
        },
        get(){
           alert("get");
           return  this.firstName  + " " +this.lastName;
        },

   }
 }

三 、watch 方法
虽然计算属性在大多数情况下是非常适合的,但是在有些情况下我们需要自定义一个watcher,在数据变化时来执行异步操作,这时watch是非常有用的。

### Vue3 中 `computed` 计算属性与 `watch` 监听的区别共同点 #### 区别 - **缓存机制** - 计算属性具有缓存特性,这意味着只有在其依赖项发生变化时才会重新计算。这有助于提高性能,减少不必要的重复运算[^1]。 - **触发时机** - 当访问计算属性的值时,它会根据当前的状态动态地计算结果;而监听器则是在指定的数据变化时立即触发回调函数执行特定的任务[^4]。 - **适用场景** - 对于简单的派生状态(如过滤列表、格式化日期),推荐使用计算属性因为更简洁直观且高效。对于复杂业务逻辑或需要异步操作的情况,则更适合采用监听器来实现[^2]。 - **返回值需求** - 在定义计算属性时必须有一个返回值作为最终的结果展示给用户或其他组件使用;相比之下,在编写监听器内部代码时并不强制要求一定要有返回值。 - **性能表现** - 使用计算属性通常能带来更好的性能优势,特别是在频繁读取同一份数据的情况下。由于其内置了高效的缓存策略,因此相比于每次改变都需重新评估一遍的监听器来说更加节省资源开销。 #### 共同点 - **依赖响应式数据** - 无论是计算属性还是监听器都能感知到由框架管理下的任何响应式的变量更改情况,并据此作出相应调整。 - **处理数据变化的能力** - 这两者都能够依据所监视对象的新旧版本差异来进行某些预设好的动作,比如更新视图显示内容或是发起网络请求等。 ```javascript // 示例:Vue3 组件内对比 computed watch用法 export default { data() { return { message: 'Hello', count: 0, }; }, computed: { reversedMessage() { // 只有当 this.message 发生变化时才重新计算属性 return this.message.split('').reverse().join(''); } }, watch: { count(newValue, oldValue) { // 每次 this.count 改变都会触发该方法 console.log(`count changed from ${oldValue} to ${newValue}`); } } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值