让我们成为更好的Vue开发者的七个技巧_0
时间：2023-03-19 22:22:24
科技观察
我已经使用Vue很多年了，尤其是去年的Vue3，所以我学到了很多东西。1.脚本设置如果你之前使用过compositionAPI，我们需要一直执行defineComponent和setup(){}:为每个组件执行此操作可能相当麻烦，并且在实践中，可以避免引导组件。您可以使用2.如何覆盖反应对象默认情况下，在定义反应对象时，您不能覆盖整个对象，如果这样做，您将失去响应能力。查看这个Codesandbox查看实际效果：https://codesandbox.io/s/lingering-http-ryf2bj?file=/src/components/HelloWorld.vue3.ReactiveCSS在新版本的Vue中，一个非常酷的东西是，CSS可以直接绑定到我们的变量中。我发现这对我去年开发的一些应用程序非常有用。.......constcolor=ref('#f000');4.全局组件有时，我们希望有一个全局可用的组件，而不是每次需要它们时都必须导入它们。我们可以通过转到main.ts并执行以下操作轻松地做到这一点：importAppfrom"./App.vue";从“@/components/MyGlobalSection.vue”导入MyGlobalSection；constapp=createApp(App);//让我们的组件全局可用.app.component(MyGlobalSection.name,MyGlobalSection);app.mount("#app");我们现在应该可以通过在组件的模板中编写来使用全局组件来全局使用组件5.CompositionAPI优于optionsAPI使用Vue3，我们获得了CompositionAPI。这是对Vue的一个非常好的补充，我认为总是选择使用CompositionAPI而不是OptionsAPI。我喜欢CompositionAPI的一件事是我发现它使用起来更灵活，因此我开始使用可组合对象，它被认为是混合的替代品。非常强大和非常酷的补充。6.使用v-once或v-memo提高性能应用。v-once，你可以在多个元素中应用v-once，比如在循环或组件中的常规元素。{{someProperty}}
{{someProperty}}
{{item}}v-memo；简而言之，v-memo用于记忆模板的子树，这意味着它存储以前渲染的结果以加速未来的渲染。v-memo指令可用于元素和组件，并且可以。v-memo接受一个数组，只有当数组中的一个值发生变化时才会重新渲染。... 如果valueA或valueB发生变化，它将更新。但是请注意，v-memo在v-for循环中不起作用。7.组件的异步加载为了让你的应用程序更高效并最小化你的主包，延迟加载你的组件是个好主意。在Vue3中，我们可以使用defineAsyncComponent来延迟加载组件。这意味着该组件仅在需要时加载。使用此技术，您可以显着改善应用程序的负载。定义异步组件最简单的方法可以这样完成：然而，如果你需要它，你可以做更多，将对象传递给defineAsyncComponent：,errorComponent:myErrorComponent/*显示是否有错误*/,delay:1000/*在显示加载组件之前延迟ms*/,timeout:3000/*在这么多ms之后超时*/,});
