Vue3.0系列(二)： VUE3.0组合API

最新推荐文章于 2024-09-18 18:18:52 发布

原创

最新推荐文章于 2024-09-18 18:18:52 发布 · 1k 阅读

7 ·

CC 4.0 BY-SA版权

本文探讨了Vue2.0组件管理的问题，如何导致组件可读性降低，并介绍了Vue3.0通过setup函数引入的组合式API，解决了逻辑碎片化问题。讲解了ref和reactive的区别，以及如何在setup中定义响应式变量。

一、Vue2.0 存在的问题：

“使用data、computed、methods、watch 组件选项来组织逻辑通常都很有效。然而，当我们的组件开始变得更大时，逻辑关注点的列表也会增长。尤其对于那些一开始没有编写这些组件的人来说，这会导致组件难以阅读和理解。”。
“这种碎片化使得理解和维护复杂组件变得困难。选项的分离掩盖了潜在的逻辑问题。此外，在处理单个逻辑关注点时，我们必须不断地“跳转”相关代码的选项块。” – vue官网

为了将业务的数据和逻辑结合在一起，Vue 3.0 提供了 组合式 API

vue3.0 提供了 setup函数，作为组合式API的入口：

<template>
  <div>{
  
  {count}}</div>
</template>

<script>
import {
    
    ref} from 'vue'; // 关于 ref 的疑问 请往下看

export default {
    
    
  setup() {
    
    
  	// setup 是组合API的入口函数
	// 定义数据
	let count = ref(0);	
	
	// 定义函数，实现相关逻辑
	// 在组合api 中定义function，不用在 methods 中，直接定义即可
	function addCount() {
    
    
		count ++;
	}
	// 注意，在组合式api中定义的变量/方法 要想在外界使用，必须通过return暴露出去
    return {
    
    count，addCount}
  }
}
</script