<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <div>{{msg}}</div>
        <!-- <div> {{msg.split('').reverse().join('')}}</div> -->
        <div>{{reverseString}}</div>
        <div>{{reverseString}}</div>
        <div>{{reverseMessage()}}</div>
        <div>{{reverseMessage()}}</div>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'hello',
            num: 100
        },
        methods: {
            reverseMessage: function() {
                console.log('methods') //初始化多次
                return this.msg.split('').reverse().join('');
            }
        },
        computed: {
            reverseString: function() {
                console.log('computed') //初始化一次
                    // return this.msg.split('').reverse().join('');
                var total = 0;
                for (var i = 0; i <= this.num; i++) {
                    total += i;
                }
                return total;
            }
        }
    })
</script>

</html>

<!--
    1.计算属性
        为何需要计算属性
        表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加整洁

        computed:{
            reversedMessage: function(){
                return this.msg.split('').reverse().join('')
            }
        }

    2.计算属性与方法的区别
        -   计算方法是基于他们的依赖进行缓存的
        -   方法不存在缓存
    -->