Vue计算属性学自b站狂神后附链接

最新推荐文章于 2024-04-13 17:51:52 发布

TxbLcy

最新推荐文章于 2024-04-13 17:51:52 发布

阅读量250

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/TxbLcy/article/details/106365522

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

计算属性的主要特性是为了将不经常变化的计算结果进行缓存，节约系统的开销。等若于mybatis中的缓存一样。
它获取一次数据，将该数据存在缓存中，下次调用直接从缓存中获取，从下图可以看出currentTime2是没有发生改变的。
当调用this.message的时候，此时，数据刷新了发送了改变，currentTime2缓存中立刻重新计算结果。
methods 和 computed 方法最好不要重名，methods的优先级高。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <!--导入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>

<!--view层 模板 -->
<div id="app">
    <p>currentTime1 {{currentTime1()}}</p>
    <p>currentTime2 {{currentTime2}}</p>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            message: "Hello Vue"
        },
        methods: {
            currentTime1: function () {  //在方法里面必须通过括号去调用
                return Date.now();   //返回当前时间戳
            }
        },
        computed: {   //计算属性   methods computed 方法不能重名。methods优先级高
            currentTime2: function () {
                this.message;  //当数据被刷新之后  重新计算
                return Date.now();   //返回当前时间戳
            }
        }

    })
</script>

</body>
</html>

https://www.bilibili.com/video/BV18E411a7mC/?p=10

TxbLcy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue计算属性学自b站狂神后附链接

计算属性的主要特性是为了将不经常变化的计算结果进行缓存，节约系统的开销。等若于mybatis中的缓存一样。它获取一次数据，将该数据存在缓存中，下次调用直接从缓存中获取，从下图可以看出currentTime2是没有发生改变的。当调用this.message的时候，此时，数据刷新了发送了改变，currentTime2缓存中立刻重新计算结果。methods 和 computed 方法最好不要重名，methods的优先级高。<!DOCTYPE html><html lang="en.
复制链接

扫一扫