【轻松学vue】vue.js基础入门教程（十）计算属性

计算属性

vue模板语法中可以使用js的方法实现数据的简单处理

<div id="app">
    <div>{{message.split('').reverse().join('')}}</div>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"hello vue.js!"
        }
    })
</script>

此时，模板不再是简单的声明式逻辑。这里是实现字符串你的翻转。当你想要在模板中多次引用此处翻转的字符串是，就会更加难以处理（需要多次调用相同的大段代码）。

所以，对于这样的复杂逻辑，你应当使用计算属性。

<div id="app">
    <div>正常文本：{{message}}</div>
    <div>翻转文本：{{reverseMessage}}</div>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"hello vue.js!"
        },
        computed:{
            reverseMessage:function () {
                return this.message.split('').reverse().join('');
            }
        }
    })
</script>

上述功能写在方法中也可以实现

<div id="app">
    <div>正常文本：{{message}}</div>
    <div>翻转文本：{{reverseMessage()}}</div>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"hello vue.js!"
        },
        methods:{
            reverseMessage:function () {
                return this.message.split('').reverse().join('');
            }
        }
    })
</script>

计算属性缓存和方法的对比

<div id="app">
        <div>正常文本：{{message}}</div>
        <div>翻转文本：{{message.split('').reverse().join('')}}</div>
        <div>计算属性：{{reverseMessage}}</div>
        <div>计算属性：{{reverseMessage}}</div>
        <div>计算属性：{{reverseMessage}}</div>
        <div>方法调用：{{messgeReverse()}}</div>
        <div>方法调用：{{messgeReverse()}}</div>
        <div>方法调用：{{messgeReverse()}}</div>
 </div>
 <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"hello vue.js"
            },
            computed:{
                reverseMessage:function () {
                    console.log("调用计算属性")
                    return this.message.split('').reverse().join('');
                }
            },
            methods:{
                messgeReverse:function () {
                    console.log("调用方法")
                    return this.message.split('').reverse().join('');
                }
            }
        })
 </script>

你会看到控制台，“调用计算属性”只会打印一次，而“调用方法”会被打印3次

区别：

1. 调用时，computed在模板中调用直接写计算属性方法名，methods在方法中调用，要加()执行方法
2. computed有缓存作用，即多次调用，在数据未发生改变的情况下，不会再次执行方法，而是拿到缓存的数据，而methods中方法会多次执行
3. 计算属性不能用于事件监听当中，适用于带有返回结果作为最终数据被调用的情况。

QQ：732005030
扫码加微信