深入理解computed 、watch 、 methods的使用场景及其区别

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),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。 大家可以看一下官网的这个例子

总结

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

原文链接:juejin.im

上一篇:利用泛型+类型推导定义伪GraphQL模型
下一篇:Vue 的 MVVM 设计模式

相关推荐

  • 说说Vue的几个watcher

    本文仅从理论的角度来阐述Vue.js中的响应式,不涉及具体源码。 Vue.js具有数据响应式的特点。 常见的场景有下面这几个: 数据变 → 使用数据的视图变 数据变 → 使用数据的计算属性变 →...

    4 个月前
  • 记一次 Vue Tabs 组件设计及计算属性 computed 动态引入组件

    本文涉及技术点: 动态组件 &amp; 异步组件 内置组件 keepalive &amp; transition 插槽 slot 及 vslot 实际场景 多级 tabs 切换,tab 项不固定,...

    4 个月前
  • 计算属性(computed)、方法(methods)和侦听属性(watch)的区别与使用场景

    参考资料:Vue.js 官网(https://cn.vuejs.org/) 1 计算属性与方法 下面两个代码示例分别用计算属性和方法实现同一个功能: 就上述两个案例而言,我们的分析如下...

    2 年前
  • 解析Vue.js中的computed工作原理

    我们通过实现一个简单版的和Vue中computed具有相同功能的函数来了解computed是如何工作的。写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。

    2 年前
  • 组件中 watch props 根据 v-if 动态判断并挂载 DOM 的问题

    20190511004013.png(https://img.javascriptcn.com/44782a057157999f6a6e7230ea486c2b "20190511004013.png...

    1 年前
  • 理清Vue响应式系统中的Watcher和Dep的关系

    理清Vue响应式系统中的Watcher TOC 引言 在这里我先提出两个问题(文章末尾会进行解答): 在Vue的数据响应系统中,Dep和Watcher各自分担什么任务? Vue的数据响应系统的核心是...

    7 个月前
  • 爬坑记录--关于在小程序上实现watch监听数据变化

    在写这篇文章之前,我要先感谢我们组的老大,没有他的帮助我无法独自解决这个问题 今天想在小程序上实现监听数据变化后进行一系列操作的功能,于是上网搜索watch的小程序实现方法。

    2 个月前
  • 源码学习VUE之Watcher

    我们在前面推导过程中实现了一个简单版的watcher。这里面还有一些问题 同步异步更新 所谓的同步更新是指当观察的主体改变时立刻触发更新。而实际开发中这种需求并不多,同一事件循环中可能需要改...

    2 年前
  • 深度解析:Vue3如何巧妙的实现强大的computed

    前言 Vue中的computed是一个非常强大的功能,在computed函数中访问到的值改变了后,computed的值也会自动改变。 Vue2中的实现是利用了Watcher的嵌套收集,渲染watche...

    6 个月前
  • 深入浅出vm.$watch和watch初始化

    目录 1.业务场景 2.用法 3.vm.$watch内部原理 4.deep参数实现原理 5.初始化watch 6.总结 1.业务场景 watch是用来监听某个数据发生变化,之后调用什么函数处理。

    5 个月前

官方社区

扫码加入 JavaScript 社区