【Vue学习笔记_04】computed计算属性
计算属性:对数据进行一些操作后再显示,本质是属性。
基本使用
下面这个例子比较了对数据进行一些操作后再展示的三种方法。直接拼接语法繁琐,通过methods性能较低,因此这个时候使用computed最为合适。
computed与methods的区别:computed有缓存,在多次使用时,只会调用一次;而methods没有缓存,使用几次调用几次,因此性能较低。
<div id="app">
<!--直接拼接:语法繁琐-->
<h2>{
{firstName + ' ' + lastName}}</h2>
<!--通过methods:性能较低-->
<h2>{
{getFullName()}}</h2>
<!--通过computed-->
<h2>{
{fullName}}</h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Perry',
lastName: 'Lee'
},
methods