【Vue】6.属性计算（类似缓存）

最新推荐文章于 2024-08-25 20:12:25 发布

待我学业归来。

最新推荐文章于 2024-08-25 20:12:25 发布

阅读量78

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_44859586/article/details/111403298

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性）
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
  <div id="app">
        <!--注意，一个是方法，一个是属性-->
        <p>调用当前时间的方法：{{currentTime1()}}</p>
        <p>当前时间的计算属性：{{currentTime2}}</p>
      </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
  <script>
    var vue = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue'
            },
            methods: {
                currentTime1: function () {
                    return Date.now();
                }
            },
        computed: {
            //使用了一个computed,则currentTime2 ，这是一个属性！不是方法
            //这是计算属性，用来保存当前变化的值（缓存），如果刷新了值，则缓存也会刷新
            currentTime2: function () {
                //this.message 是为了能够让 currentTime2 观察到数据变化而变化；
                this.message;
                return Date.now();
            }
        }
    })
</script>
</body>
</html>