Vue中计算属性和methods方法的区别

最新推荐文章于 2024-08-13 17:30:16 发布

Dcripple

最新推荐文章于 2024-08-13 17:30:16 发布

阅读量3.6k

点赞数 3

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

本文链接：https://blog.csdn.net/weixin_45990765/article/details/119181063

版权

Vue 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

1、计算属性和methods的执行结果都是相同的

2、当计算属性没有依赖data中的数据时，第一次使用计算属性时，会把第一次的结果进行缓存，后面再次使用计算属性，都会去第一次的结果中进行查找

3、methods方法，每调用一次，就会触发一次

4、计算属性的用法与data中的数据用法一样，因此计算属性在使用时，不加 ( )

5、methods方法在调用时，( ) 可加可不加

6、计算属性具有缓存功能，methods方法没有

    <div id="app">
        <p>methods中的方法</p>
        <p>{{fn1()}}</p>
        <p>{{fn1()}}</p>
        <p>{{fn1()}}</p>
        <hr />
        <p>计算属性中的方法</p>
        <p>{{fn2}}</p>
        <p>{{fn2}}</p>
        <p>{{fn2}}</p>
    </div>
<script src="./vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{

        },
        computed:{
            fn2(){
                console.log('计算属性');
                return new Date();
            }
        },
        methods:{
            fn1(){
                console.log('函数方法');
                return new Date();
            }
        }
    });
</script>