Learn about the benefits of Computed

computed=


1.Readability

2.Caching

Caching


The msgFun runs three times, and msgCaching is output three times after one run, and then cached values are output three times

that is, msgFun is three times and msgCaching is one time (caching)

andthis.msg.split(").Readability is good because long sentences, such as reverse().join(''), can be defined as msgCaching sentences (readability)

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

<script>
	const vm = new Vue({
    	el: '#app',
          data: {
          msg: 'abc'
        },
            
        methods: {
          msgFun () {
            return this.msg.split('').reverse().join('')
          }      
        },
            
        computed: {
          msgCaching () {
            return this.msg.split('').reverse().join('')
          }
        }
	})
</script>


참고

Computed의 장점에 대해서

Sep 23, 2023 Views 116