,Vue 3已经发布了一年，它的主要新功能是：Composition API。从2021年秋季开始，推荐新项目使用Vue 3的 script setup 语法，所以希望我们能看到越来越多的生产级应用程序建立在Vue 3上。,这篇文章旨在展示一些有趣的方法来利用Composition API，以及如何围绕它来构造一个应用程序。,新的组合API释放了许多有趣的方法来重用跨组件的代码。复习一下：以前我们根据组件选项API分割组件逻辑：data、methods、created 等。,有了Composition API，我们就不会受限于这种结构，可以根据功能而不是选项来分离代码。,Vue 3.2引入了<script setup>语法，这只是setup()函数的语法糖，使代码更加简洁。从现在开始，我们将使用 script setup 语法，因为它是最新的语法。,在我看来，这是一个比较大想法。我们可以把这些功能分成自己的文件，而不是用通过放置 在script setup中的位置来保持它们的分离。下面是同样的逻辑，把文件分割开来的做法。,注意，featureA.js和featureB.js导出了Ref和ComputedRef类型，因此所有这些数据都是响应式的。,然而，这个特定的片段可能看起来有点矫枉过正。,如果生命周期钩子（onMounted，onUpdated等）可以在setup里面使用，这也意味着我们也可以在我们的可组合函数里面使用它们。甚至可以这样写：,而且Vue甚至会在vuex内部注册生命周期钩子!,有了这种灵活性，了解如何以及何时注册这些钩子就很重要了。请看下面的片段。哪些onUpdated钩子将被注册？,结论：在声明生命周期方法时，应使其在setup初始化时同步执行。否则，它们在哪里被声明以及在什么情况下被声明并不重要。,我们经常需要在我们的逻辑中使用async/await。天真的做法是尝试这样做:,然而，如果我们尝试运行这段代码，组件根本不会被渲染。为什么?因为 Promise 不跟踪状态。我们给 data 变量赋了一个 promise，但是Vue不会主动更新它的状态。幸运的是，有一些变通办法：,为了渲染该组件，我们可以使用.then语法。,这种方式有自己优缺点：,如果我们把这个逻辑包在一个异步IIFE里面，我们就可以使用 async/await的语法。,这种方式也有自己优缺点：,如果我们在父组件中用<Suspense>包装这个组件，我们就可以自由在setup 中自由使用async/await!,<Suspense> 组件在子组件 setup 中有更多的可能性，而不仅仅是异步。使用它，我们还可以指定加载和回退状态。我认为这是创建异步组件的前进方向。Nuxt 3已经使用了这个特性，对我来说，一旦这个特性稳定下来，它可能是首选的方式。,优点。最灵活。,缺点：对package.json的依赖。,VueUse库依靠Composition API解锁的新功能，给出了各种辅助函数。就像我们写的useFeatureA和useFeatureB一样，这个库可以让我们导入预制的实用函数，以可组合的风格编写。下面是它的工作原理的一个片段。,我无法向你推荐这个库，在我看来，它是任何新的Vue 3项目的必备品。,下面是这个库如何解决前面提到的异步调用执行问题。,这种方法可以让你在setup里面执行异步函数，并给你回退选项和加载状态。现在，这是我处理异步的首选方法。,新的defineProps和defineEmits语法,script setup 带来了一种在Vue组件中输入 props 和 emits 的更快方式。,就个人而言，我会选择通用风格，因为它为我们节省了一个额外的导入，并且对null和 undefined 的类型更加明确，而不是Vue 2风格语法中的{ required: false }。, 注意，不需要手动导入 defineProps 和 defineEmits。这是因为这些是Vue使用的特殊宏。这些在编译时被处理成 "正常 的选项API语法。我们可能会在未来的Vue版本中看到越来越多的宏的实现。,因为typescript要求默认输入模块的返回值，所以一开始我主要是用这种方式写TS组合物。,这种方式，我认为这是个错误。其实没有必要对函数返回进行类型化，因为在编写可组合的时候可以很容易地对它进行隐式类型化。它可以为我们节省大量的时间和代码行。,如果EsLint将此标记为错误，将'@typescript-eslint/explicit-module-boundary-types': 'error'，放入EsLint配置（.eslintrc）。,Volar是作为VsCode和WebStorm的Vue扩展来取代Vetur的。现在它被正式推荐给Vue 3使用。对我来说，它的主要特点是：typing props and emits out of the box。这很好用，特别是使用Typescript的话。,现在，我总是会选择Vue 3项目中使用Volar。对于Vue 2, Volar仍然适用，因为它需要更少的配置 。,以前，有一些例子，所有的逻辑都是在script setup 中完成的。还有一些例子是使用从.vue文件导入的可组合函数的组件。,大代码设计问题是：我们应该把所有的逻辑写在.vue文件之外吗？有利有弊。,我是这样选择的：
© 版权声明
文章版权归作者所有，未经允许请勿转载。
