《Vue.js实战》第三章计算属性 computed

最新推荐文章于 2024-06-05 20:43:04 发布

西直门三太子

最新推荐文章于 2024-06-05 20:43:04 发布

阅读量372

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_29744347/article/details/89405020

前端专栏收录该内容

15 篇文章

订阅专栏

本文详细解析了Vue.js框架中methods与computed属性的使用差异，包括methods每次调用都会执行，而computed依赖缓存，只有当依赖的属性变化时才重新计算。同时介绍了如何通过get和set方法实现computed的读写操作，以及computed属性如何依赖其他实例的属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>computed</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="app">
    <div>methods:{{mTime()}}</div>
    <div>computed:{{cTime}}</div>
    <div @click="print">打印</div>
</div>
<div id="app2"></div>
<script>
    //methods 方法每次调用执行
    //computed 依赖缓存 只有computed 中依赖的属性发生改变 才重新计算 rand 改变 cTime() 重新计算
    //computed get , set ... 通过 App.cTime = "ok"  触发 computed set 方法
    //computed 还可以依赖其它实例的属性... 如 app2的属性
    const app2 = new Vue({
        el:"#app2",
        data(){
            return {
                rand:0,
            }
        }
    });
    let App = new Vue({
        el: '#app',
        data() {
            return {
                rand: 0,
            }
        },
        methods: {
            mTime() {
                return new Date()
            }, print() {
                // this.rand = Math.random();
                //依赖app2.rand
                app2.rand = Math.random();
                console.log("methods", this.mTime());
                console.log("computed", this.cTime);
            }
        },
        computed: {
            cTime: {
                get() {
                    // this.rand;
                    app2.rand;
                    return new Date();
                },
                set(val) {
                    console.log("computed-set", val);
                },
            }
        }
    });

    App.cTime = "setVal";
</script>
</body>
</html>