vue3.0菜鸟教程,vue3.0入门
Vue是用于构建用户界面的渐进式JavaScript框架，是目前最火的前端框架之一，是前端工程师的必备技能。下面这篇文章主要介绍Vue3.2.x中的一些提示和注意事项，供大家参考。
目录
前言关于减少使用。值关于减少导入语句关于在脚本设置中声明组件名关于响应问题关于在模板循环中添加或不添加键摘要
前言
Vue3在2022年2月7日成为Vue的默认版本，随之而来的还有vue3的新文档。从实用的角度来说，vue3确实比vue2用起来更舒服，所以我觉得在使用一段时间后，再来分享一些使用过程中的小技巧和注意事项。
小技巧
关于减少.value的使用
使用watch监控Ref数据时，可以省略使用。值，例如：
const value=ref(1)；
//Omit ()=value.value
手表(值，(v)={
//省略v.value
console . log(v)；
}，{ immediate:true })；
setTimeout(()={
value . value=2；
}, 1000);使用VUE版本vue3.2.25或以上提供的$ref，仍然实现与上述代码相同的功能。
此功能是实验性的，需要进行相应的配置。这里以vite为例。您需要在vite.config.ts的vue插件中添加一个reactivityTransform属性，请参见下面的配置。如果使用的是其他工程工具，可以参考vue的新文档，里面有详细的说明。
插件：[
vue({
reactivityTransform: true，
})
]
const count=$ ref(1)；
//Added ()=count
手表(
()=计数，
(五)={
console . log(v)；
},
{ immediate: true }
);
setTimeout(()={
//count.value被省略
数数；
}, 1000);输出：
这里需要说明一下使用$ref时需要注意的问题。首先这个功能是实验性能，需要相应配置。而且vue的文档中指出这个方法是编译器宏，没有必要介绍。不过为了ts和编辑的无端错误，我还是喜欢引入display，像这样，从‘vue/macros’导入{$ref}。然后，$ref的另一个严重问题是其实这部分官方文档已经解释过了，请看下面的代码。
//App.vue
从“vue/macros”导入{ $ ref }；
从导入{ useApp }。/App ；
let count=$ ref(1)；
useApp(计数)；
setTimeout(()={
console . log(“change”)；
数数；
}, 1500);
//App.ts
从“vue”导入{ watch }；
导出const useApp=(count)={
手表(
()=计数，
(c)={
console.log(watch ，c)；
},
{ immediate: true }
);
};
上面代码中App.ts中的手表只会执行一次。显然，count已经失去了响应能力。
如何解决这个问题？请看下面的代码：
//App.vue
从“vue/macros”导入{ $ref，$ $ }；//介绍$ $
从导入{ useApp }。/App ；
let count=$ ref(1)；
useApp($$(计数))；//use app(count)-use app($ $(count))
setTimeout(()={
console . log(“change”)；
数数；
}, 1500);
//App.ts
从“vue”导入{ watch }；
导出const useApp=(count)={
手表(
计数，//()=计数-计数
(c)={
console.log(watch ，c)；
},
{ immediate: true }
);
};
如您所见，当我们传递$ref值时，我们需要用$ $方法包装它，这样我们就不会失去响应能力。更详细的用法，希望你能仔细阅读vue的新文档。
关于减少import导入语句
这个功能的发现是无意的。使用element-plus时，查看elment-plus官网丢失响应式指南，其中提到了快速开始的功能。文件上说先下载对应的插件NPM Install-D unplug in-Vue-Components unplug in-Auto-Import，然后如果你用的是vite，需要在vite.config中添加几个配置，就像下面这样：
//vite.config.ts
从“拔出-自动导入/邀请”导入自动导入
从“unplugin-vue-components/vite”导入组件
从“unplugin-vue-components/resolver”导入{ ElementPlusResolver }
导出默认值{
插件：[
//.
自动导入({
解析器：[ElementPlusResolver()]，
}),
组件({
解析器：[ElementPlusResolver()]，
}),
],
}
好奇的看了这两个包的介绍，发现不仅是组件，连方法都可以自动导入。例如，我那位细心的朋友发现我没有编写导入语句来导入。值部分，无论是ref还是$ref。在这里，我使用了这两个插件。如果要自动导入vue，先来看看方法对应的配置。
//vite.config.ts
从“拔出-自动导入/邀请”导入自动导入
从“unplugin-vue-components/vite”导入组件
从“unplugin-vue-components/resolver”导入{ ElementPlusResolver }
导出默认值{
插件：[
//.
自动导入({
Imports: [vue ， vue/macros]，//添加这行代码。
解析器：[ElementPlusResolver()]，
}),
组件({
解析器：[ElementPlusResolver()]，
}),
],
}
在这种配置下，进口可以愉快地减少。
关于在script setup中声明组件名字
脚本设置方法刚发布的时候，我一直在纠结这个问题，因为项目中有很多递归的组件，如果没有名字来标记，就会出现问题。
起初，其他用户在vue问题上提出的解决方案是在。vue文件，其中一个用来定义组件的名称，另一个用来写组件的逻辑，比如如下：
这种方法相信包括我在内的一些强迫症或者完美主义者是完全无法接受的。所以vue的问题里有个用户开发了一个插件来解决这个问题。
Unplugin-vue-define-options插件下载插件NPM I Unplugin-vue-define-options-d我们直接来看看这个插件的用法：
自动导入
//vite.config.ts
从 unpluk in-vue-define-options/vite 导入定义选项
从 @vitejs/plugin-vue 导入Vue
导出默认定义配置({
插件：[Vue()，DefineOptions()]，
})
在vite中使用
{
编译器选项:{
类型:[ unplugin-vue-define-options ]
}
}
ts项目需要在tsconfig.json中添加一个配置
脚本安装语言=ts
定义选项({
名称：“应用程序”
})
/脚本
插件的功能远不止定义组件名称，还可以定义道具、发射、渲染等。组件的。有兴趣的朋友可以看一看，觉得可以利用这个特性做一些骚操作，但是特别觉得这个方法不太好。
注意事项
关于响应式的问题
道具不能以解构的方式使用，比如下面这个例子//parent.vue。
模板
child vue ref= child ref v-bind= data /
/模板
脚本安装语言=ts
从“vue”导入{ reactive }；
从导入ChildVue。/views/child . vue ；
const data=reactive({ name: veloma })；
setTimeout(()={
data.name= timer
}, 1500);
/脚本
//Child.vue
模板
div{{ data.name }}/div
/模板
脚本语言设置
const props=defineProps{
名称：字符串；
}();
常数数据=反应({.道具})；
/脚本
上例中，props在子组件中被reactive解构，父组件中的名称在1.5s后更新，此时我们会发现子组件中的模板不会更新，那么如何解决这个问题呢？
首先，有两种解决方案：
1.使用3.2.25或以上版本直接解构defineProps，如const { name }=define props { name:string }()
2.或者通过computed进行解构，例如constdata=computed (()=({.道具})))
模板循环中加不加key的问题
关于这个问题，vue的新文档里提到了这句话。
光看这句话是没有问题的，但是在实际使用中，比如：
//Parent.vue
模板
差异
列表的v-bind=item/ChildVue
按钮@click=onClick 按钮/按钮
/div
/模板
脚本安装语言=ts
从“vue”导入{ ref }；
从导入ChildVue。/views/child . vue ；
const list=ref([{ name: veloma }，{ name: timer }，{ name: Lucy }])；
const onClick=()={
console . log( click )；
常量项目={.list . value[0]}；
item.name= veloma1111
list . value[0]=item；
};
/脚本
//Child.vue
模板
div{{ name }}/div
/模板
脚本语言设置
从“vue”导入{ on mounted }；
定义方案{
名称：字符串；
}();
onMounted(()={
console.log(mounted )。
});
/脚本
看上面的代码，我们会发现功能很简单。子组件接收一个name属性，父组件循环呈现子组件，子组件中有一个onMounted钩子。我们希望当按钮被点击时，子组件的onMounted钩子将被触发。乍一看没有问题，但实际上不会被触发。看看结果：
我们发现click事件确实触发了，数据也确实改变了，页面也改变了，但是没有触发子组件的onMounted钩子。发生了什么事？其实vue处理这一步的时候，使用方式，重用了之前的子组件名veloma，是不会触发onMounted钩子的，那么怎么解决呢？其实很简单，给子组件一个键就行了。
总结
到目前为止，还有很多公司没有升级到vue3，但是我相信在不久的将来甚至今年，vue3 vite typescript一定会覆盖大部分公司，所以我建议朋友们还是需要认真仔细的看两遍vue的新文档，系统的了解vue3的变化，为以后的升级做准备。加油！
这篇关于Vue3.2.x中的提示和注意事项的文章到此为止，想要了解更多关于Vue 3.2.x的提示，请搜索我们之前的文章或者继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。