目录：

1. 数据侦听器

1.1. 变更方法

1.2. 替换数据

2. 计算属性

2.1. 基础

2.2. 缓存 vs 方法

数据侦听器(以数组为例)

变更方法

vue能够侦听响应式数据组的变更方法，并在他们被调用的时触发相关的更新。这些变更方法包括：

• push
• pop
• shift
• unshift
• splice
• sort
• reverse

源码：

效果：

替换数据

变更方法，顾名思义，就是会对调用他们的原数据进行变更。

相对地，也有不可变方法，例如 filter、concat、slice ，这些都不会更改原数组，而是返回一个新的数据。

当遇到的是需要变更方法时，我们需要将旧的数据替换为新的数据

this.items =  this.items.concat(["新增数据" + this.count]);

源码：

效果图：

计算属性

基础

模板中的表达式虽然方便，但也只能用来做简单的操作。

如果模板中写太多逻辑，会让模板变得臃肿，难以维护。

因此推荐使用计算属性来描述依赖响应式状态的复杂逻辑。

计算属性缓存 vs 方法

你可能注意到我们在表达式中像这样调用一个函数也会获得和计算属性相同的结果：

{{ publisMessage1() }}

// 组件中
methods:{
     publisMessage1(){
         return this.page.content.length>0?"Data":"No Data";
    }
}

若我们将同样的函数定义为一个方法而不是计算属性，两种方式在结果上确实是完全相同的，然而，不同之处在于计算属性值会基于其响应式依赖被缓存。

一个计算属性仅会在其响应式依赖更新时才重新计算。

这意味着只要 page.content 不改变，无论多少次访问 publisMessage1 都会立即返回先前的计算结果，而不用重复执行 getter 函数。

这也解释了为什么下面的计算属性永远不会更新，因为 Date.now() 并不是一个响应式依赖：

computed: {
  now() {
    return Date.now()
  }
}

相比之下，方法调用总是会在重渲染发生时再次执行函数。

为什么需要缓存呢？想象一下我们有一个非常耗性能的计算属性 list，需要循环一个巨大的数组并做许多计算逻辑，并且可能也有其他计算属性依赖于 list。没有缓存的话，我们会重复执行非常多次 list 的 getter，然而这实际上没有必要！如果你确定不需要缓存，那么也可以使用方法调用。

区别：

计算属性：计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算

方法：方法调用总是会重新渲染发生时再次执行函数