vue中的计算属性computed-白红宇的个人博客

vue中的计算属性computed

发布日期：2021-05-07 07:49:17 浏览次数：24 分类：原创文章

本文共 1015 字，大约阅读时间需要 3 分钟。

举一个例子，有一个要将当前时间显示到页面上的需求，我们通常会想到用一个函数返回结果到页面上显示。然后每次要获取的时候就得重新调获取日期的方法，假如要调成千上万个方法，每次都得去重新去重新加载和调用函数，这样效率会很慢，而计算属性可以将调用过一次的函数加载到页面缓存中，这样再次用到这个函数的时候就直接从缓存中获取执行，和redis的缓存机制相似。

较为官方的解释：
计算属性突出在属性两个字上，他是一个具有计算（函数）功能的属性，简单来说就是一个能够将计算结果缓存起来的属性。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>计算属性</title>    </head><body>        <div id="app">        <span>{  {getCurrentTime()}}</span><br>        <span>{  {getCurrentTime1}}</span>    </div></body><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>    var vue = new Vue({            el: "#app",        data: {            },        methods:{                getCurrentTime:function(){                    return new Date();            }        },        computed:{                getCurrentTime1:function(){                    return new Date();            }        }    })</script></html>

在这里插入图片描述

上一篇：vue中的watch监听

下一篇：属性绑定v-bind指令

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章