(13)计算属性

最新推荐文章于 2024-11-01 17:01:39 发布

liuyang___

最新推荐文章于 2024-11-01 17:01:39 发布

阅读量99

点赞数

分类专栏： vue学习笔记文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/liuyang___/article/details/125220069

版权

vue学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

这篇博客探讨了Vue.js中计算属性与方法的使用。计算属性`reverseString`用于字符串反转，其优势在于缓存计算结果，提高效率。而方法`reversMessage`每次调用都会重新计算，不进行缓存。计算属性适用于不需要频繁变动的计算逻辑，而方法适合于需要每次执行时都计算的场景。

摘要由CSDN通过智能技术生成

    <div id="app">
        <div>{{msg}}</div>
        <div>{{reverseString}}</div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: "你好"
            },
            methods: {

            },
            computed: {
                reverseString: function () {
                    return this.msg.split('').reverse().join('');
                }
            }
        }) 
    </script>

应用场景：把这个复杂的表达式逻辑抽取出来，让模板变的更加简洁

用法：添加一个computed属性，通过函数的方式定义计算属性，使用时，直接调用函数名字就行，不用加括号。在函数体中，具体的计算逻辑。必须加return。。

我们上面用计算属性，做到了字符串反转操作，接下来，我们看用方法，怎么做。。。

    <div id="app">
        <div>{{msg}}</div>
        <div>{{reverseString}}</div>
        <div>{{reverseString}}</div>
        <div>{{reversMessage()}}</div>
        <div>{{reversMessage()}}</div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: "你好"
            },
            methods: {
                reversMessage:function(){
                    console.log('methods');
                    return this.msg.split('').reverse().join('');
                }
            },
            computed: {
                reverseString: function () {
                    console.log('computed');
                    return this.msg.split('').reverse().join('');
                }
            }
        }) 
    </script>

计算属性是会缓存的，就是计算过一次的东西，不会继续计算，如果你再次调用，它会拿你储存过的东西，直接给你结果。

方法调用：他会每次都算，但不缓存。