vue开发技巧,vue入门教程简书
如果说JQuery是手工作坊，那么Vue.js就像工厂。虽然Vue.js做的任何事情JQuery都可以做，但是前者在代码量和流程标准化方面更胜一筹。本文主要介绍Vue项目中常见的实用技巧，有需要的朋友可以参考一下。
目录
前言1。使用$attrs和$listeners进行多级数据和事件交付2。实现数据的双向绑定，方便数据维护。sync用于实现道具的“双向绑定”。使用模型选项3。使用Mixins4。使用动态组件来延迟加载组件5。使用：v-深入CSS中的组件范围内修改组件样式6。使用decorator优化代码7。使用require.context获取项目目录信息的摘要引用。
前言
在Vue项目开发中，很容易产生一些问题，比如代码重复、复杂。其实Vue项目开发有很多技巧可以用。本文将列举一些简单有用的技巧，帮助我们写出漂亮的代码。使用的技术栈是vue 2.0 typescript vue-property-decorator元素ui。将使用以下技术：
使用$attrs和$listeners进行多级数据和事件传递。
实现数据的双向绑定，方便数据的维护。
使用混音
使用动态组件来延迟加载组件。
在组件范围内使用：v-deep在CSS中修改组件的样式。
用装饰器优化代码。
使用require.context获取项目目录信息。
1. 使用 $attrs 和 $listeners 进行多层级的数据和事件传递
先说怎么送道具吧。它可以分为静态道具和动态道具：
！-静态道具-
blog-post title=我的Vue之旅/blog-post
！-动态道具-
博客帖子v-bind:title= post . title /博客帖子
！-动力传动可以缩写为-
博客帖子：title= post . title /博客帖子
！-当需要传递多个属性时，可以在v-bind上将它们写在一起-
博客帖子v-bind={ editable，title:post . title } /博客帖子
知道了道具是如何交付的，再看看官方文档是如何定义$attrs的，我们在一个特别大的文档中介绍了这样的$attrs:
$attrs:包含父作用域中未被识别(和获取)为属性的属性绑定类和样式。当一个组件没有声明任何属性时，它将包含所有的父作用域绑定(除了类和样式)，并可以通过v-bind=$attrs 传递到内部组件中
$attrs包含传入父作用域但未在props中声明的其他props。所以我们可以用$attrs来替换那些父组件中不需要但子组件需要的道具，通过v-bind=$attrs 传递给后代。这样就避免了一个一个申报，然后一个一个通过。
博客帖子v-bind= $ attrs /博客帖子
上面的代码行通过v-bind=$attrs 传递了该范围内不属于blog-post组件的其他属性。
父组件通过$attrs传递给后代组件后，后代组件如果想通过触发事件来更新父组件的状态，应该怎么做？如果逐级升级emit事件，会不会让代码过于繁琐复杂？在Vue中，你可以通过$listeners来解决这个问题。首先，看一下关于$listeners的官方文档：
包含父范围中的v-on事件侦听器(没有。原生修饰符)。它可以通过v-on=$listeners 传递到内部组件3354中。这在创建更高级别的组件时非常有用。
文档说$listeners在父作用域中包含事件侦听器。这意味着$listeners表示父组件中事件侦听器的集合。只要是触发父组件的事件，而不是它自己的，就可以用v-on=$listeners 来表示。
！-父组件(第一级组件)-
componentA @ on-change= handle change v-bind= { editable，title: post.title} /
！-中间层的组件-
子v-bind= $ attrs v-on= $ listeners /
！-数据传输的目标组件，由事件触发的组件-
div @ click= handle click“{ title } }/div
脚本
导出默认值{
道具：{
标题：字符串
}
handleClick() {
这个。$emit(on-change ， New Title )；
}
}
/脚本
在上面的代码示例中，中间层组件中剩余的Prop通过v-bind=$attrs 传递给子组件，然后父作用域中的事件侦听器通过v-on=$listeners 绑定，once emit传递给父组件。
2. 实现数据的双向绑定，方便维护数据
父组件需要将数据传递给子组件的场景有很多，当子组件触发数据更新时，会立即反馈给父组件。父组件更新数据，单向数据流向子组件，最后子组件更新。通常通过props $emit的方式来更新状态，但是这种方式有点笨拙，维护起来比较困难，所以可以通过实现数据的“双向绑定”来提高代码的可维护性。这可以通过以下方式实现：
使用 .sync 实现 Prop 的“双向绑定”
添加。当v-bind属性时使用sync修改器。分配新值时发出emit( update:propname ，new value)。
！- .sync是v-on的缩写：更新模式-
子v-on:update:title=title /
！-相当于-
Child :title.sync=title /
如果要更新上面代码中的title值，只需要这个。$emit(update:title ， new title )来完成数据更新。
使用 model 选项
模型是2.2.0中的新选项。默认情况下，组件上的v-model将使用属性命名值和事件命名输入，而model选项可以指定属性名称和事件名称来实现v-model。优点是实现v-model时可以避免Prop和事件名的冲突。
！-父组件-
型号v-型号=已检查/
！-模型组件-
div @click=handleClick
定制组件的Pv模型/p
已检查{ {已检查}}
/div
脚本语言
导出默认值{
型号：{
道具：“已检查”，
事件：“更改”
},
道具：{
选中：布尔型
},
方法：{
handleClick() {
这个。$emit(change ，this . checked)；
}
}
在上面的代码中，只需要在模型选项中添加prop和event，就可以实现v-model。而且在Vue TS项目中，模型装饰器是在vue-property-decorator中提供的，需要这样写：
@Model(change ，{ type: Boolean })只读检查！布尔型
handleClick() {
这个。$emit(change ，this . checked)；
}
只有。sync和model可以用来实现数据的“双向绑定”，可以在一定程度上减少我们的代码，使其更加优雅，可维护性更强。
3. 使用 Mixins
Mixins可用于两种情况：
用来提取组件中的常用代码加强代码重用，用在组件中或者页面中比用在全世界都好。
用于分离功能点时，有时会出现一种情况，即很多业务功能导致编写的Vue文件有大量的行，导致代码难以维护，功能点代码难以跟踪。这个庞大的Vue文件可以通过提取功能代码来更好的维护。
首先写一个公共mixin文件，把高度重用的状态和函数写入其中。
导出默认类CommonMixins扩展Vue{
公共分页={
页面大小：20，
总计：0，
当前页面：1，
}
handleChangePageSize (pageSize:数字，cb:函数){
this . paginations . pageSize=pageSize；
CB()；
}
handleChangePageNum(current page:number，cb: Function) {
this . paginations . current page=current page；
CB()；
}
}
Vue-property-decorator提供了Mixins的装饰。把mixin引入一个业务页面，只需要发进去就可以了，而且可以发多个，说明你混了多个mixin。
脚本语言
从“vue-property-decorator”导入{ Component，Mixins }；
从导入CommonMixins。/common-mixin ；
从导入PermissionMixins。/permission-mixin ；
@Component({})
导出默认类父扩展mixin(common mixin，PermissionMixins
}
/脚本
如果只需要一个，可以直接继承。
脚本语言
从“vue-property-decorator”导入{ Component，Mixins }；
从导入CommonMixins。/common-mixin ；
@Component({})
导出默认类父扩展CommonMixins {
}
/脚本
当遇到功能点多、代码量大的页面时，我们可以使用Mixin提取一些功能点，通过文件来管理这些功能，这样会更容易管理代码。
4. 使用动态组件去懒加载组件
组件的加载是同步的，但是当页面内容很多的时候，有些组件是不需要一开始就加载的，比如弹出式组件。这些组件可以加载动态组件，可以提高主模块的加载性能。在Vue中，可以使用组件动态组件来决定根据is的值渲染哪个组件。
模板
差异
主页br/
Button @click=handleClick1 单击以录制组件1/buttonbr/
Button @click=handleClick2 单击以录制组件2/buttonbr/
组件：is= child 1 /组件
组件：is= child 2 /组件
/div
/模板
脚本语言
从“vue-property-decorator”导入{ Component，Vue }；
@Component({})
导出默认类AsyncComponent扩展Vue {
public child 1:Component=null；
public child 2:Component=null；
handleClick1() {
this.child1=require(。/child1 )。违约；
}
handleClick2() {
this.child2=require(。/child 2’)。违约；
}
}
/脚本
在本例中，组件只有在被单击时才会被加载。组件还可以与v-show协作来控制显示和隐藏，这样该组件将只安装一次，以优化性能。
5. 在组件作用域内的 CSS 中使用 ::v-deep 修改组件样式
有很多场景你想改变UI组件的样式，然后又怕影响到别人的使用，被作用域后就不生效了。可以使用：v-deep深度选择器在组件范围内修改CSS的样式。我们可以在CSS中使用操作符，但是我们必须在预处理程序中使用/deep/or: v-deep。
样式范围。ivu-选项卡-选项卡窗格{
背景：# f1f1f1
}
/风格
style lang=scss 范围
/深/。ivu-选项卡-选项卡窗格{
背景：# f1f1f1
}
/风格
style lang=scss 范围
*深v型。ivu-选项卡-选项卡窗格{
背景：# f1f1f1
}
/风格
* v-deep和/deep/具有相同的功能，但不建议使用/deep/Vue3.0将不支持/deep/的写入。
6. 使用装饰器优化代码
Decorator增加了代码的可读性，清楚地表达了意图，并提供了一种方便的手段来添加或修改类的函数，例如为类中的方法提供防抖功能。
从“lodash.debounce”导入去抖；
导出函数去抖(delay: number，config: object={}) {
return (target: any，prop: string)={
返回{
值：去抖(目标[prop]，延迟，配置)，
};
};
}
这样做的好处是使用起来非常方便，也增加了代码的可读性。
@去抖(300)
onIdChange(val: string) {
这个。$emit(idchange ，val)；
}
7. 利用 require.context 去获取项目目录信息
关于require.context，webpack文档是这样描述的：
您可以向该函数传递三个参数：要搜索的目录、指示是否搜索其子目录的标志以及匹配文件的正则表达式。
web将在构建期间解析代码中的require.context()。如果您想要导入文件夹下的所有文件或可以匹配正则表达式的所有文件，此函数非常有用。
根据这个提示，我们可以引用一个文件夹下的所有文件，这样就可以利用获得的文件信息来做一些操作。比如注册组件的时候，我们本来需要一个一个的引入和注册组件，后来又想添加新的，重新编写。现在我们可以通过require.context优化这段代码
//从“”导入WmsTable。/WMS-table/table/index ；
从导入表。/table/index . vue ；
从“”导入自定义挂钩。/custom-hooks/custom-hooks-actions/index ；
从导入SFilter。/s-filter/filter-form ；
从“”导入WButton。/button/index ；
从导入CreateForm。/create form/create-form/create form . vue ；
从导入操作。/table/action-table-column . vue ；
从导入DetailItem。/detail-item . vue ；
vue . component(“w-filter”，s filter)；
Vue.component(w-button ，WButton)；
Vue.component(custom-hooks ，custom hooks)；
Vue.component(create-form ，create form)；
Vue.component(w-table ，表)；
Vue.component(w-table-action ，Action)；
vue . component( zone time-date-picker ，ZonetimeDatePicker)；
Vue.component(detail ，detail item)；
注册全局组件时，不需要一个一个导入，一个一个注册。可以使用require.context自动导入模块这样做的好处是，当我们创建一个新的组件时，我们不必手动注册它，而是在一开始就帮助我们自动完成。
const contexts=require.context(。/，true，/\。(vue ts)$/)；
导出默认值{
安装(虚拟机){
contexts.keys()。forEach(component={
const componentEntity=contexts(组件)。违约；
if (componentEntity.name) {
VM . component(component entity . name，component entity)；
}
});
}
};
总结
本文介绍了Vue实战中经常用到的一些技巧。这些技巧旨在提高开发效率，如简单实现双向数据绑定和跨层数据传输等。此外，它们还可以提高代码的可维护性和可读性，比如实用的decorator和使用Mixin来拆分代码和管理功能点。
关于Vue项目常用实用技巧的总结这篇文章到此为止。更多关于Vue项目常用技巧的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
引用
要求.上下文
Vue官方文件
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。