计算属性

计算属性

一、计算属性不是函数

<div id="app">
    {{reversedMsg()}}
</div>

new Vue({
    el: '#app',
    data: {
        msg: 'hello'
    },
    computed: {
      reversedMsg() {
          return this.msg.split('').reverse().join('')
      }
    }
})

程序执行后会报错：TypeError: reversedMsg is not a function

这是因为reversedMsg并不是一个函数，其实它的定义方法是这样的：

reversedMsg: {
    get() {
        return this.msg.split('').reverse().join('')
    }
}

因为计算属性默认使用get，所以就有了这种简化写法：

reversedMsg() {
	return this.msg.split('').reverse().join('')
}

二、计算属性VS方法

1.计算属性

计算属性是有缓存的，多次访问reversedMsg会立即返回之前的计算结果。只有当data中的数据改变时，才会重新求值

<div id="app">
    <ul>
        <li>{{reversedMsg}}</li>
        <li>{{reversedMsg}}</li>
        <li>{{reversedMsg}}</li>
    </ul>
</div>

new Vue({
    el: '#app',
    data: {
        msg: 'hello',
    },
    computed: {
      reversedMsg() {
        console.log('1111')
        return this.msg.split('').reverse().join('')
      }
    }
})

1111只会被打印一次

2.方法

方法是没有缓存的

<div id="app">
    <ul>
        <li>{{reversedMsg()}}</li>
        <li>{{reversedMsg()}}</li>
        <li>{{reversedMsg()}}</li>
    </ul>
</div>

new Vue({
    el: '#app',
    data: {
        msg: 'hello',
    },
    methods: {
      reversedMsg() {
        console.log('1111')
        return this.msg.split('').reverse().join('')
      }
    }
})

1111会被打印三次