计算属性(computed)和方法(methods)的区别

计算属性类似于缓存的概念
计算出来的结果保存在属性中
在内存中运行(虚拟DOM)
好处:节省浏览器成本
代码实现

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

</head>
<body>
<!--view层:模板-->
<div id="app">
    <p>currentTime1{{currentTime1()}}</p>  //通过方法来调用
    <p>currentTime2{{currentTime2}}</p>     //通过属性调用 (第一次调用后就不变化存入缓存中,之后每次调用时从缓存中取出,当数据发生变化会自动刷新)
</div>
<!--vm.message
"hello"
vm.currentTime2
1638100323286
vm.currentTime2
1638100323286
vm.message='123'
"123"
vm.currentTime2
1638100360020-->
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>

    /*model层:数据*/
    var vm=new Vue({
        el:"#app",
        data: {
            message: "hello",
        },
        methods:{
            currentTime1:function () {
                return Date.now();//返回一个时间戳
            }
        },
        computed: {
          //计算属性和methods方法名不能重名  重名后只会调用methods中方法
            currentTime2:function () {
                this.message;
                return Date.now();//返回一个时间戳
            }
        }
    });
</script>
</body>
</html>
posted @ 2021-11-28 21:31  一刹流云散  阅读(178)  评论(0编辑  收藏  举报