Vue 3 技术分享 - 计算属性及缓存

来自主题 : 技术分享 · 作者 : 编程小子 · 发布时间 : 11/09/2021 · 浏览次数 : 166

缓存方式的计算属性

<!DOCTYPE html>
<html lang="en">
<body>{{result}}<script src="https://unpkg.com/vue@next"></script>
<script>
const App = {
    data() {
        return {
            a : 1,
            b : 2
        }
    },
    computed:{
        result(){
            return this.a + this.b;
        }
    },
    methods: {
        
    },
    mounted() {
        setTimeout(()=>{
            this.a = 3;
        }, 2000);
    },
}
Vue.createApp(App).mount('#app');
</script>
</body>
</html>

函数定义在 computed 内，模板语法 {{ result }} 不加 ()

响应式计算属性

<!DOCTYPE html>
<html lang="en">
<body>{{result()}}<script src="https://unpkg.com/vue@next"></script>
<script>
const App = {
    data() {
        return {
            a : 1,
            b : 2
        }
    },
    methods: {
        result(){
            return this.a + this.b;
        }
    },
    mounted() {
        setTimeout(()=>{
            this.a = 3;
        }, 2000);
    },
}
Vue.createApp(App).mount('#app');
</script>
</body>
</html>

能看出差别吗?

收藏此文



相关回复

{{comment.u_nickname}} @ {{comment.comments_reply_uname}}

{{comment.comments_content}}

 {{comment.comments_date}}

 点赞 ({{comment.comments_like_count}})  回复 ({{comment.comments_reply_count}})

{{commentSon.u_nickname}} @ {{commentSon.comments_reply_uname}}

{{commentSon.comments_content}}

 {{commentSon.comments_date}}

 点赞 ({{commentSon.comments_like_count}})  回复 ({{commentSon.comments_reply_count}})