vue的computed属性

如果在模板中放入太多的逻辑会让模板过重而且难以维护。咱们先来看一个示例：

<div id="app">
    <h1>{{ message.split('').reverse().join('') }}</h1>
</div>

在这个示例中，模板不再简单和清晰。你必须看一段时间才能意识到，这里是想要显示变量message的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。这就是对于任何复杂逻辑，你都应当使用计算属性的原因。接下来咱们一起来学习Vue中的计算属性。计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。在Vue中有多种方法为视图设置值：使用指令直接将数据值绑定到视图使用简单的表达式对内容进行简单的转换使用过滤器对内容进行简单的转换除此之外，我们还可以使用计算属性根据数据模型中的值或一组值来计算显示值。计算属性计算属性允许我们对指定的视图，复杂的值计算。这些值将绑定到依赖项值，只在需要时更新。例如，我们可以在数据模型中有一个results数组：

data () {
    return {
        results: [
            {
                name: 'English',
                marks: 70
            },
            {
                name: 'Math',
                marks: 80
            },
            {
                name: 'History',
                marks: 90
            }
        ]
    }
}

假设我们想要查看所有主题的总数。我们不能使用filters或expressions来完成这个任务。 filters：用于简单的数据格式，在应用程序的多个位置都需要它 expressions：不允许使用流操作或其他复杂的逻辑。他们应该保持简单这个时候，计算属性就可以派上用场。我们可以向模型中添加一个计算值，如下：

computed: {
    totalMarks: function () {
        let total = 0
        let me = this
        for (let i = 0; i < me.results.length; i++) {
            total += parseInt(me.results[i].marks)
        }
        return total
    }
}

totalMarks计算属笥使用数组resultes的marks计算出总值。它只是循环遍历值并返回子总数。

然后，我们可以在视图中显示计算值：

<div id="app">
    <div v-for="subject in results">
        <input v-model="subject.marks">
        <span>Marks for {{ subject.name }}: {{ subject.marks }}</span>
    </div>
    <div>
        Total marks are: {{ totalMarks }}
    </div>
</div>

computed属性和 methods属性的区别

同时在模板中将{{ totalMarks }} 替换成 {{ totalMarks() }}。 你最终看到的结果是一样的

但是呢 computed是依赖缓存的不像方法一样总是重新执行渲染所以性能更好

猜你喜欢