深入理解computed 、watch 、 methods的使用场景及其区别__Vue.js
发布于 3 年前 作者 banyungong 1628 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

computed、watch、methods是我们在Vue项目中经常使用的三个属性,今天我就来好好捋一捋他们其中的关系。

使用场景

computed

  • 当依赖某些状态(data中的数据)发生变化时,优先选择使用computed

举个例子,总价 = 数量 * 价格,当数量和价格发生变化时都会影响总价,这时计算属性就派上用场了。

<div id="demo">
    <div>
      <button @click="addPrice">+</button>
      <span>price:{{price}}</span>
      <button @click="reducePrice">-</button>
    </div>
    <div>
      <button @click="addAmount">+</button>
      <span>amount:{{amount}}</span>
      <button @click="reduceAmount">-</button>
    </div>
    <div>{{total}}</div>
 </div>


 var vm = new Vue({
    el: '#demo',
    data:{
      price:10,
      amount:20
    },
    computed:{
      total(){
        return this.price * this.amount
      }
    },
    methods:{
      addPrice(){
        this.price++
      },
      reducePrice(){
        this.price--
      },
      addAmount(){
        this.amount++
      },
      reduceAmount(){
        this.amount--
      }
    }
  })

watch

  • 用来解决beforeUpdate, updated两个钩子里修改状态导致死循环的问题,采用watch
  • 监测可能异步改变值得时候

举个例子,当商品的数量减少是,商品的价格就会上升。

<div id="demo">
    <div>
      <span>price:{{price}}</span>
      <button @click="reduceAmount">-</button>
    </div>
</div>


 var vm = new Vue({
    el: '#demo',
    data:{
      price:10,
      amount:20
    },
    watch:{
      amount(){
        this.price++
      }
    },
    methods:{
      reduceAmount(){
        this.amount--
      },
    }
  })


可能你会想,在这里使用计算属性依然能够实现,但有必要去增加一个多余的变量么。

methods

  • 定义事件响应函数
  • 定义组件公共处理函数

区别

computed 和 methods 区别

  1. 相同点
  • 如果作为模板的数据显示,二者都能实现相应的功能,唯一不同的是methods定义的方法需要执行
  1. 不同点
  • computed 会基于响应数据缓存,methods不会缓存
  • diff之前先看data里的数据是否发生变化,如果没有变化computed的方法不会执行,但methods里的方法会执行
<div id="demo">
    <div>{{reversedMessage}}</div>
    <div>{{reversedMsg()}}</div>
    <div>{{dataStr}}</div>
    <button @click="change">change</button>
</div>


var vm = new Vue({
    el: '#demo',
    data:{
      message: "hello",
      dataStr: null
    },
    computed:{
      reversedMessage (){
        console.log("computed")
        return this.message.split('').reverse().join('')
      }
    },
    methods:{
      reversedMsg(){
        console.log("methods")
        return this.message.split('').reverse().join('')
      },
      change(){
        this.dataStr = new Date().getTime()
      }
    }
  })

结果:computed只会打印一次,当点击change按钮,methods会再次打印,computed这不会在打印。

这里的dataStr必须放到页面中去,这样dataStr改变之后才会使页面重新渲染。

watch 和 computed 区别

  1. 相同点
  • 如果做信息展示,二者可以实现同样的功能。不同的是watch可能需要监听更多的属性。在这个时候,我们优先选择computed 将第一个例子的JS代码改变一下,用watch来实现
var vm = new Vue({
    el: '#demo',
    data:{
      price:10,
      amount:20,
      total:200
    },
    watch:{
      price(newVal){
        this.total =  newVal * this.amount
      },
      amount(newVal){
        this.total = newVal * this.price
      }
    },
    methods:{
      addPrice(){
        this.price++
      },
      reducePrice(){
        this.price--
      },
      addAmount(){
        this.amount++
      },
      reduceAmount(){
        this.amount--
      }
    }
  })

谁更简洁是不是显而易见啦

  1. 不同点
  • 当想在更新data数据后再次更新数据的时候,建议使用watch来监听data里数据的变化(这种情况不能使用updated生命周期钩子,否则回陷入死循环)
  • 使用 watch 选项允许我们执行异步操作(访问一个API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。 大家可以看一下官网的这个例子

总结

熟能生巧,大家多多使用就一定能掌握好他们。

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 前端布吉岛 原文链接:https://juejin.im/post/6844904153806798855

回到顶部