Vue - 8-vue calculation properties

calculation properties: are cached based on their dependencies. Only when related dependencies change Will be re-evaluated. This means that as long as the message has not changed, multiple visits Calculating the property immediately returns the previous calculation without having to execute the function again

函数方法: Whenever re-rendering is triggered, the calling method will always execute the function again

: Calculated properties Suitable for larger calculations and lower frequency attributes for better performance The function method is suitable for changing the frequency and the attribute that does not need to be cached

<div id="enjoy">
    <p>Initial value: {{msg}}</p>
    <p>Flip value (French one: data): {{msg.split('').reverse().join('')}}</p>
    <p>Flip value (French 2: function): {{reverseStr()}}</p>
    <!--The calculation attribute is not followed by parentheses-->
    <p>Flip value (method three: calculation attribute): {{reverse}}</p>
</div>
        {
            new Vue({
                el:'#enjoy',
                data:{
                    msg:'hello!'
                },
                methods:{
                    reverseStr(){
                       return this.msg.split('').reverse().join('');
                    }
                },
                computed:{//calculation option 
                    //get method
                    reverse(){
                        return this.msg.split('').reverse().join('');
                    }
                }
            })
        }