账户中心 退出系统
开发文档 资讯·分享 技术交流 会员登录
phpGrace GSCMS 公众号系统
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.u_nickname}} @ {{comment.comments_reply_uname}}
{{comment.comments_content}}
 {{comment.comments_date}}
 点赞 ({{comment.comments_like_count}})   回复 ({{comment.comments_reply_count}})
{{commentSon.u_nickname}}
{{commentSon.u_nickname}} @ {{commentSon.comments_reply_uname}}
{{commentSon.comments_content}}
 {{commentSon.comments_date}}
 点赞 ({{commentSon.comments_like_count}})   回复 ({{commentSon.comments_reply_count}})
{{loadmoreText}}