在 Vue 中，computed 是常用于计算属性的一个选项。它的原理可以简单概括如下：当计算属性依赖的数据发生改变时，computed 会重新计算并返回新的值。这个过程是在响应式系统中自动进行的，也就是说，computed 会自动监听数据的变化，并且只有在必要的情况下才会重新计算。
computed 的基本语法
在 Vue 的模板中，我们可以使用计算属性来动态计算数据，并将其展示在页面中。computed 的基本语法如下：
computed: {
propertyName: function() {
// 计算并返回值
}
}在这个语法中，propertyName 是计算属性的名字，它可以在模板中使用。function 是一个函数，用来计算并返回计算属性的值。计算属性可以依赖其他数据，当这些数据发生改变时，计算属性会自动重新计算。在计算属性中，使用 return 关键字返回新的值。
计算属性的使用示例
下面我们来看一个计算属性的使用示例。假设我们要动态计算一个数组的长度，我们可以使用 computed 来实现：
// javascriptcn.com 代码示例
<template>
<div>
<p>数组的长度是 {{ arrLength }}。</p>
</div>
</template>
<script>
export default {
data() {
return {
arr: [1, 2, 3, 4, 5]
}
},
computed: {
arrLength() {
return this.arr.length
}
}
}
</script>在这个示例中，我们定义了一个名为 arr 的数组，并使用计算属性 arrLength 来动态计算它的长度。在模板中，我们使用 {{ arrLength }} 来展示计算属性的值。
computed 的实现原理
computed 的实现原理是基于 Vue 的响应式系统的。在 Vue 中，每个组件实例都有一个关联的响应式对象，在这个响应式对象中为每个属性添加了一个叫做“依赖项”（Dep）的数据结构。当一个观察者对象（Watcher）订阅了一个属性的变化时，它实际上是被添加到了这个属性的依赖项中。每个依赖项都维护了一个列表，其中包含了所有依赖它的观察者对象。
在计算属性定义中，我们可以定义一个函数，这个函数中可以访问到其他的响应式数据，然后计算出结果。当响应式数据发生变化时，这个函数会被重新调用得到新的计算结果。计算属性本质上是一个 Getter 函数，当我们访问计算属性时，实际上是在调用这个 Getter 函数来获取计算结果。
在计算属性被访问时，它会在运行时检查计算属性依赖的所有响应式数据，包括 data 和其他 computed 属性。Vue 会在依赖项中添加当前的观察者对象。在计算属性依赖的任何数据发生变化时，计算属性的值将被重新计算。这个过程是在响应式系统中自动进行的，不需要我们手动去触发。
computed 和 methods 的区别
在 Vue 中，还有一个类似于 computed 的选项，叫做 methods。methods 也可以用来计算数据，但是和 computed 有一些明显的区别：
methods 是一个普通函数，它在每次调用时都会被执行；computed 是一个 Getter 函数，只有在计算属性依赖的数据发生变化时才会被调用。
methods 在模板中使用时，每次计算都会执行一次函数并返回新的值。computed 在模板中使用时，只要依赖的数据没有发生变化，就会直接返回上次计算的结果，不会重新计算。
methods 不会自动监听数据的变化，它不能够自动重新计算。如果使用 methods 来计算响应式数据，我们需要手动去触发它的更新。
综上所述，computed 更适合用于计算响应式数据，而 methods 则更适合用于处理事件等动态行为。
总结
在 Vue 中，computed 是一个强大的选项，它可以帮助我们动态地计算数据，并将其展示在页面中。computed 的原理是基于 Vue 的响应式系统的，它会自动侦听依赖的数据的变化，并在必要的情况下重新计算。computed 和 methods 有很大的区别，我们需要根据实际的需求来选择合适的选项来处理数据。
下面是一个完整的示例代码：
// javascriptcn.com 代码示例
<template>
<div>
<p>数组的长度是 {{ arrLength }}。</p>
<button @click="add">添加一项</button>
</div>
</template>
<script>
export default {
data() {
return {
arr: [1, 2, 3, 4, 5]
}
},
computed: {
arrLength() {
return this.arr.length
}
},
methods: {
add() {
this.arr.push(this.arr.length + 1)
}
}
}
</script>来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653725787d4982a6ebf871fe