一个小白的vue之路(五)——vue的computed属性、watch属性、methods

前言:在我们学习过程中肯定会遇到使用vuecomputed属性的地方,但还有一个watch属性与之非常相似,又是有感觉把方法放入methods同样能解决问题,到底该如何使用,它们之间又有何区别,下面我们将详细的讲一下。
一、概念
我们要理解作者的设计用意,即它们的设计用意,即它们是用来做什么的。
computed:计算属性,一切复杂的运算都应该使用computed属性
watch::侦听器,watch主要用于监控vue实例的变化,它监控的变量当然必须在data里面声明才可以,它可以监控一个变量,也可以是一个对象。
methods:一个容器,方法再此声明,为了方便管理。
二、computed vs methods
我们来看一段官网上的代码:

{{ message.split(' ').reverse().join(' ') }}

模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。我们稍加改进,并以这个为例比较。

{{newMessage}} {{newMessage}} {{newMessage()}} {{newMessage()}}

结果:

控制台输出的结果 :
computed
method
method

这里computed里的newMessage和methods里的newMessage都被调用了两次,但computed里的newMessage只执行了一次。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。我们可以看出computed只在相关依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 newMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。多次执行开销巨大,当然官网中也说了你若不希望有缓存,你可以使用方法来代替。
三、computed vs watch
最简单直接的了解它们的不同我们来看一个例子:

你可能感兴趣的:(我的Vue之路)