vue入门教程简书,开发vue需要掌握什么技术
作为一个用Vue很多年的人，尤其是去年，我一直在用Vue3，所以我学到了很多。所以，本文为我们准备了7个成为更好的Vue开发者的小技巧，有需要的可以参考一下。
目录
1、脚本设置2、如何覆盖反应对象3、反应CSS4、全局组件5、组合API优于选项API6、使用v-once或v-memo提升性能7、组件异步加载。
1、脚本设置
如果我们以前使用过复合API，我们需要始终执行defineComponent和setup() {}:
脚本语言
从“vue”导入{ define component }；
导出默认定义组件({
名称：“测试”，
setup() {
//添加业务逻辑
}
})
/脚本
在每个组件上执行此操作可能相当麻烦。事实上，您可以避免启动组件。您可以使用脚本设置，它是执行如上所示相同操作的缩写。它基本上只是顶部的语法糖，因此，您不必每次都手动启动它：通过脚本设置，您的组件将被简化为：
脚本语言设置
//添加业务逻辑
/脚本
2、如何覆盖反应对象
默认情况下，定义响应对象时，不能覆盖整个对象。如果你这样做，你会失去反应。
脚本语言
从“vue”导入{ defineComponent，reactive，on mounted }；
导出默认定义组件({
名称：“HelloWorld”，
setup() {
设myReactiveObject=reactive({
姓名：“尼基”，
年龄： 37 ，
国家：“丹麦”，
});
让newObject={
姓名：“尼基克里斯滕森”，
年龄： 36 ，
国家：“丹麦”，
};
onMounted(()={
setTimeout(()={
//my reactive object=new object//不起作用
Object.assign(myReactiveObject，new object)//将起作用
}, 2000)
})
返回{
myReactiveObject，
};
},
});
/脚本
检查这个Codesandbox，看看它的实际效果。
3、反应式 CSS
在新版本的Vue中，一个很棒的事情是CSS可以直接绑定到我们的变量。我发现这对我去年构建的一些应用程序非常有用。
4、全局组件
有时，我们希望拥有全球可用的组件，而不是每次需要时都必须导入它们。
通过转到main.ts并执行以下操作，我们可以轻松做到这一点：
从导入应用程序。/app . vue ；
从“@/components/myglobalcession . vue”导入MyGlobalSection
const App=create App(App)；
//使我们的myglobalcession/component全局可用。
app . component(myglobalcession . name，myglobalcession)；
app . mount( # app )；
现在，我们应该能够通过在要使用的组件的模板中编写my global section/来全局使用全局组件。
5、组合 API 优于选项 API
有了Vue 3，我们得到了组合API。这是对Vue的一个很好的补充。我觉得我总是选择用Composition API而不是Options API。
我喜欢Composition API的地方是，我发现它使用起来更灵活，我开始使用composeables，它被认为是mixins的替代品。非常强大和非常酷的补充。
6、使用 v-once 或 v-memo 提高性能
如果您关心快速渲染，您可能希望使用Vue的内置指令之一，如v-once或v-memo，来提高应用程序的渲染性能。
V-once，可应用于多个元素，如常规元素、循环或组件。
模板
！-单身-
p v-once{{ someProperty }}/p
！-有了孩子-
div v-once
p{{ someProperty}}/p
/div
！-组件-
my-component v-once /
！-v-对于指令-
Li v-for= " items " in items " v-once { { item } }/Li
/模板
v-memo；简而言之，v-memo是用来记忆模板的子树的，也就是说它存储了以前渲染的结果，以加快以后的渲染速度。
V-memo指令可以用于元素和组件，并且可以。V-memo接受一个数组，只有当数组中的一个值改变时才会被重新呈现。
div v-memo=[valueA，valueB]
.
/div
如果valueA或valueB发生变化，它将被更新。但是，请注意，v-memo在v-for循环中不起作用。
7、组件的异步加载
为了使您的应用程序更有效，并最小化您的主包，延迟加载您的组件是一个好主意。在Vue3中，我们可以使用defineAsyncComponent来延迟加载组件。
这意味着组件只在需要时才被加载。使用这项技术，您可以显著提高应用程序的负载。
定义异步组件的最简单方法如下：
从“vue”导入{ defineAsyncComponent }；
//延迟加载
const my component=definesaynccomponent(()=
导入(。/components/myComponent.vue )
);
但是，如果需要，可以做更多的工作来将对象传递给defineAsyncComponent:
const my component=defineAsyncComponent({
loader: ()=import(。/my component . vue’)，
loading component:my loading component/*在加载时显示*/，
error component:myErrorComponent/*显示是否有错误*/，
延迟：1000 /*显示加载组件之前的毫秒延迟*/，
超时：3000 /*经过这么多毫秒后超时*/，
});
这就是这篇分享成为更好的Vue开发者的7个技巧的文章。要了解更多相关的Vue技巧，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。