Vue2.X 计算属性和函数

最新推荐文章于 2025-06-06 17:06:54 发布

原创最新推荐文章于 2025-06-06 17:06:54 发布 · 520 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

VUE 专栏收录该内容

16 篇文章

订阅专栏

本文探讨了Vue2.x中计算属性与函数的区别，指出函数每次访问都会重新计算，而计算属性会在数据不变时缓存结果。计算属性适用于处理不常变化的数据。文中还给出了相关HTML和Vue代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue2.x 计算属性和函数

写在前面： 此博客记录自己学习vue学习笔记，如有侵权，联系删！
学习来源： Vue + Vue-Cli 快速入门教程
李南江老师各平台账号：

微博：极客江南
微信公众号：李南江
腾讯课堂：李南江
网易云课堂：李南江

计算属性和函数
通过计算属性我们能拿到处理后的数据, 但是通过函数我们也能拿到处理后的数据

那么计算属性和函数有什么区别呢?
1、函数"不会"将计算的结果缓存起来, 每一次访问都会重新求值
2、计算属性"会"将计算的结果缓存起来, 只要数据没有发生变化, 就不会重新求值

计算属性特点
只要返回的结果没有发生变化, 那么计算属性就只会被执行一次

计算属性应用场景
计算属性:比较适合用于计算不会频繁发生变化的的数据

html代码：

<div id="app">
    <!--<p>{{msg1()}}</p>
    <p>{{msg1()}}</p>
    <p>{{msg1()}}</p>-->
    <p>{{msg2}}</p>
    <p>{{msg2}}</p>
    <p>{{msg2}}</p>
</div>

vue代码：

// 这里就是MVVM中的View Model
let vue = new Vue({
    el: '#app',
    // 这里就是MVVM中的Model
    data: {
    },
    // 专门用于存储监听事件回调函数
    methods: {
        /*
        函数的特点: 每次调用都会执行
        * */
        msg1(){
            console.log("msg1函数被执行了");
            let res = "abcdef".split("").reverse().join("");
            return res;
        }
    },
    // 专门用于定义计算属性的
    computed: {
        /*
        计算属性的特点: 只要返回的结果没有发生变化, 那么计算属性就只会被执行一次
        计算属性的应用场景: 由于计算属性会将返回的结果缓存起来
                            所以如果返回的数据不经常发生变化,
                            那么使用计算属性的性能会比使用函数的性能高
        * */
        msg2: function () {
            console.log("msg2计算属性被执行了");
            let res = "abcdef".split("").reverse().join("");
            return res;
        }
    }
});