Vue.js 计算属性 

<body>
    <div id="computed">
        <p>Message: "{{ message }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p>
        <p>Computed reversed message: "{{ reversedMessage2() }}"</p>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#computed',
            data: {
                message: 'Hello Vue'
            },
            computed: {
               reversedMessage: function () {
                   return this.message.split('').reverse().join('')
               }
            },
            methods: {
                reversedMessage2: function () {
                    return this.message.split('').reverse().join('')
                }
            }
        });

    </script>
</body>

通过调用表达式中的method来达到同样的效果:不经过计算属性，我们可以在 method 中定义一个相同的函数来替代它。

计算属性:它是基于它的依赖缓存。计算属性只有在它的相关依赖发生改变时才会重新取值。这就意味着只要message 没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

method:每当重新渲染的时候，method 调用总会执行函数。

posted @ 2017-02-22 16:42  米娜-火箭  阅读(273)  评论(0)  编辑  收藏  举报