账户中心 退出系统
开发文档 资讯·分享 技术交流 会员登录
phpGrace GSCMS 公众号系统
Vue3 组合 api 实现响应式最简单的例子
来自主题 : 技术分享   ·  作者 : GraceUI · 分享号     ·  发布时间 : 08/31/2021   ·  浏览次数  :  324

组合 api 的好处

使用组件api可以有效地减少组件 data 内部变量的声明及组件方法声明,可以结合普通响应式开发出更复杂的应用(代码更简洁)。

实现流程

1 解构 ref 和 reactive 函数 import { ref, reactive } from "vue";

   ref() 函数使一个普通变量变为响应式,reactive() 使一个对象变为响应式;

2 在组件内使用 setup 函数完成业务逻辑然后使用 return 暴露变量及函数;

实现代码

<template>
      {{ msg }}{{ person.name }}{{name}}  </template>
<script>
import { ref, reactive } from "vue";
export default {
	name: 'HelloWorld',
	props: {
		msg: String
	},
	setup(){
		let name = ref('grace ...');
		let person = reactive({name:'san', age : 18});
		function changeTxt(){
			console.log('changeTxt');
			name.value = "go...";
			person.name = "zhang san";
		}
		return {name, changeTxt, person};
	}
}
</script>
<style scoped>
	
</style>

并不是完全使用组合 api 替代原有的响应式,合理搭配组合才是更好的 ~

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