为了账号安全,请及时绑定邮箱和手机立即绑定

vue之结合methods和watch理解计算属性computed

标签:
Vue.js

1. 从methods的角度理解

我们可以在模板内使用表达式进行简单的计算:

<template>
  <div> Reversed message: "{{ message + 'OPQ'}}"</div></template>

但是对于相对复杂一点的逻辑,我们一般会调用方法处理然后再返回结果:

<template>
  <div> Reversed message: "{{revMessage()}}"</div></template>
<script type="text/javascript">
  export default {
    data() {      return {        message: "ABCDEFG"
      }
    },    methods: {      revMessage: function () {        return this.message.split('').reverse().join('')
      }
    }
  }</script>

webp

运算结果

methods很好的处理了这些相对复杂的逻辑计算,但是methods有两个特性:

  • methods是交互方法,需要主动去触发

  • methods每次计算后都会把变量回收,再次访问的时候会重新计算。

如果想缓存计算结果,这个时候就可以用到computed了:

<template>
  <div> Reversed message: "{{revMessage}}"</div></template>
<script type="text/javascript">
  export default {
    data() {      return {        message: "ABCDEFG"
      }
    },    computed: {      revMessage: function () {        return this.message.split('').reverse().join('')
      }
    }
  }</script>

webp

运算结果


为了更理解computed的特性,我们通过调试台改变message的值:


webp

调试结果


我们可以看到,在改变message的值之前,使用methods和computed得到的结果是一样,而当我们去改变message的值以后会自动触发revMessage,对字符串进行翻转。

通过上面的例子,应该能大概理解computed相对于methods的一些特性了,下面我还是进行一下总结:

  • methods是交互方法需要主动去触发,而computed则是在检测到data数据变化时自动触发的。

  • methods是一次性无缓存的计算,computed则是有缓存的。methods每次计算后都会把变量回收,再次访问的时候会重新计算。而computed则是依赖数据的,数据占用内存是不会被回收掉的,再次访问的时候不会重新计算,而是返回上次计算的值,当依赖的数据发生改变时才会再次计算。

2. 从watch的角度理解

理解了methods和computed两者的区别以后,熟悉AngularJS或者Avalon.js的人可能会发现,其实computed和watch迷之相似,都是在关注一个数据,并在数据发生变化的时候做出反应。没错,很相像,但是vue认为大部分时候使用计算属性,会比使用watch监听更优,我们看看下面两个的例子:

//watch的例子<template>
  <div>message: {{all}}</div></template><script type="text/javascript">
  export default {
    data() {      return {        all:'ABCEFG',        message1:'ABC',        message2:'EFG'
      }
    },    watch: {      message1: function (val) {        this.all = val+ this.message2
      },      message2: function (val) {        this.all = this.message1+ val
      }
    },
    mounted(){      window.vue = this
    }
  }</script>
//computed的例子<template>
  <div>message: {{all}}</div></template><script type="text/javascript">
  export default {
    data() {      return {        message1:'ABC',        message2:'EFG'
      }
    },    computed: {      all: function () {        return this.message1 + this.message2
      },
    },
    mounted(){      window.vue = this
    }
  }</script>

这两段代码都是在做同一件事,监听message1和message2,在任何一个数据有变化的时候触发回调,更新两者合并的值。但是可以看到,使用watch的话需要分开两次去监听,然后再分开两边执行回调,相比之下使用computed简练的多了。



作者:四小七
链接:https://www.jianshu.com/p/2243fd51d79a


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消