专栏首页coding个人笔记Vue中computed和watch比较

Vue中computed和watch比较

Vue在监听数据的时候我们都会用computed和watch,但是很少人真正的去比较两个的区别,一般都是能实现就行。本人也是,习惯了watch,之后就几乎没用过computed。所以用官网的例子理解一下这两者的区别。

computed: {
    // 计算属性的getter
    reversedMessage: function () {
console.log('调用了');
    return this.message.split('').reverse().join('');
  }
},
默认是getter方法,在页面中直接使用{{reversedMessage}}。官网上说用methods也能实现相同的功能。
methods: {
    reversedMessage: function () {
console.log('调用了');
    returnthis.message.split('').reverse().join('');
  }
}

页面使用{{reversedMessage()}}

然而不同的地方就在于计算属性computed有缓存。当我们连续调用计算属性:

console.log(vm.reversedMessage) console.log(vm.reversedMessage) console.log(vm.reversedMessage)

你会发现计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。

Methods就不同,你要是多次调用:

{{reversedMessage()}} {{reversedMessage()}} {{reversedMessage()}}

那么这个方法就会执行多次。

至于为什么需要缓存,在计算性能开销较大的时候,在依赖不变的时候就不用执行方法。

watch也是监听属性,跟computed一样也是依赖的改变了就会改变,不同的是,当你一个数据关联两个数据的时候,watch两个数据还不如直接一个computed。

firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
fullName依赖于firstName和lastName,如果我们要用watch,那么就要监听两个数据
watch: {
    firstName: function (val) {
      this.fullName = val + ' ' +this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + '' + val
    }
  }
使用计算属性computed:
fullName: function () {
      return this.firstName + ' ' +this.lastName
    }

这就是watch和computed在选择使用的时候要考虑的一个重要因素,另外一个重要因素是官网所说的当需要在数据变化时执行异步或开销较大的操作时,watch方式是最有用的。简单来说就是涉及异步操作然后需要设定不同中间值等,这时候就使用watch。

Computed还有一个setter方法:

fullName: {
    // getter
    get: function () {
        console.log('get');
        return this.firstName + ' ' +this.lastName;
    },
    // setter
    set: function (newValue) {
        this.firstName = '120';
        this.lastName = '021';
        console.log('set');
    }
}

然后我们调用:

vm.fullName = 'John Doe';

你会发现,首先触发set方法,然后执行get方法,得到的结果是120 021,这就表明我们需要验证一些数据然后要根据验证得到不同的结果的时候我们就可以使用set进行逻辑验证然后设置对应的结果,最后通过get方法得到最终的结果。

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-11-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 实现一个Promise之基础、异步

    其实跟着promise a+一步一步,按照顺序实现一个promise并不难,今天先实现最简单的promise和异步resolve。本来想全部一次性写完,想想还是...

    wade
  • JavaScript之数组

    Array在JavaScript里面很常用,讲真的,平时开发除了循环数组和push数组之外,对于数组的其他方法和属性几乎都是用到的时候百度。今天自己整理一些数组...

    wade
  • 用vue实现一个虚拟列表

    上次分享了超长列表分片加载的方式,这种方式现在一般不会使用,因为dom会变的无比庞大,页面会很卡,今天分享用vue实现一个虚拟列表的简易实现,本来是想用原生实现...

    wade
  • 关于其他选择器以及选择器优先级详解

    上周我们讲解了页面浮动之后产生的问题,以及针对这个问题所采取的措施——清浮动,同时罗列了好几种清浮动的方法。那本周我们再来继续上次给大家分享的如何找标签的问题,...

    HTML5学堂
  • Bootstrap学习文档(四)

    注意: 1、弹出层必需放在body里 2、弹出层里面不能再嵌套别的层 3、弹出层出来以后,页面的滚动条会被覆盖

    Wizey
  • CSS选择器优先级

    HTML5学堂:CSS优先级所谓优先级是指CSS样式在浏览器中被解析的先后顺序。 CSS选择器的优先级:id > class > tagname。具体我们来看看...

    HTML5学堂
  • Servlet 中的 Listener

    JavaEdge
  • vue计算属性详解——小白速会

    一、什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如: <div id="exam...

    柴小智
  • 【响应式】foundation栅格布局的“尝鲜”与“填坑”

    提到响应式,就不得不提两个响应式框架——bootstrap和foundation。在标题上我已经说明白啦,今天给大家介绍的是foundation框架。 何为“尝...

    外婆的彭湖湾
  • 浏览Github必备的5款神器级别的Chrome插件

    我们知道 Github 是程序员特有的宝藏,也可以称它为 GayHub, 大家浏览 Github 的时候,一定遇到过下面这些问题:

    Guide哥

扫码关注云+社区

领取腾讯云代金券