账户中心 退出系统
开发文档 资讯·分享 技术交流 会员登录
phpGrace GSCMS 公众号系统
一次性体验 Vue3 组合式API - setup
来自主题 : 技术分享   ·  作者 : 静心入红尘     ·  发布时间 : 11/10/2021   ·  浏览次数  :  231

Vue 3 最具特色的新特性就是组合式 api,下面的代码可以体验大部分功能哦 ~

<template>
{{result}}
{{afun}}
</template> <script lang="ts"> import {onMounted, ref, watch, computed, toRefs } from "vue"; export default{   props:{     name : {       type:String,       default:'grace'     }   },   setup(props) {     //1 结构组件属性     const { name } = toRefs(props);     console.log(name.value);     //2 ref() 将变量变成响应式     let result = ref(120);         //3 onMounted 生命周期     onMounted(() => {       setTimeout(()=>{result.value += 5;}, 3000);     });         //4 wacth     watch(result, (nVal, oldVal)=>{       //console.log(nVal, oldVal);     });         //5 计算属性     const afun = computed(()=>{       return 10;     });         return {result, afun}   } } </script> <style> </style>


收藏此文
相关回复
{{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}}