Vue项目常用的技巧有哪些

本篇内容介绍了“Vue项目常用的技巧有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！先聊聊如何传递 Prop，可以分为静态和动态的 Prop：
了解了 Props 的传递方式，在看看官方文档是怎么定义 $attrs 的， 在尤大大的文档中这样介绍了 $attrs：$attrs: 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind=”$attrs” 传入内部组件$attrs 包含了传入到父作用域中没有在 props 声明的其他 props，因此我们可以用 $attrs 去代替那些父组件中不需免费云主机域名要的而子组件需要的 props， 通过 v-bind=”$attrs” 统一传递给后代。这样就避免了一个个声明然后再一个个传递。
上面这一行代码就通过 v-bind=”$attrs” 的方式将本作用域中不作为 prop 的其他属性传递给了 blog-post 组件。
父组件通过 $attrs 传递给后代组件后，后代组件如果想通过触发事件来更新父组件状态该如何处理？如果一级一级地往上 emit 事件，会不会弄得代码太繁琐复杂了？在 Vue 中可以通过 $listeners 解决这个问题，先看看官方文档关于 $listeners 的说明：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=”$listeners” 传入内部组件——在创建更高层次的组件时非常有用。文档中说了 $listeners 包含了父作用域中的事件监听器。意思就是 $listeners 表示了父组件中的事件监听器集合，只要是触发父组件的事件，而不是自己的，就可以用一个 v-on=”$listeners”表示。
上面的代码示例中，中间层的组件内通过 v-bind=”$attrs” 将其余的 Prop 传递给了 Child 组件，再通过 v-on=”$listeners” 绑定父作用域中的事件监听器，一旦 emit 就会传给了父组件。
有很多这样的场景，父组件需要传递数据给子组件，且在子组件触发数据更新的时候，马上反馈给父组件，父组件数据更新，单向数据流向子组件，最后子组件更新。通常情况用 props + $emit 的方式去更新状态，但是这种处理方式有点笨拙，且不易维护，所以可以通过实现数据的“双向绑定”来提高代码的可维护性。可以通过这以下方式去实现：
在 v-bind prop的时候添加 .sync 修饰符，赋新值的时候用 this.$emit(‘update:propName’, newValue)
如果要更新上述代码中的 title 值，只需要 this.$emit(‘update:title’, ‘新标题’)，完成数据更新。
model 是2.2.0+ 新增的选项，一个组件上的 v-model 默认会利用名为 value 的 Prop 和名为 input 的事件， 而 model 选项可以规定 Prop 名称和事件名称来实现 v-model，好处是在实现 v-model 的同时也避免了 Prop 和事件名的冲突。
自定义组件的v-model在上述代码中，只需要在 model 选项中添加 prop 和 event，就可以实现了 v-model。而在 Vue + TS 项目中 vue-property-decorator 中提供了 Model 的装饰器，需要这么写：
只需要通过 .sync 和 model 就可以实现数据的“双向绑定”，这样书写代码可以一定程度上减少我们的代码，而且另代码变得更优雅且可维护。
Mixins 可以用于两种场景：利用它去抽取成组件内的公共代码加强代码复用，不要在全局内套来套去，最好在组件内或者页面中使用。利用它去分离功能点，有时候会遇到一种情况，就是业务功能很多导致写起来的 Vue 文件行数很多，导致代码很难以维护，功能点代码不好追踪。可以通过抽取功能代码的方式，让这个庞大的 Vue 文件更好维护。首先写一个公共的 mixin 文件， 把高复用的状态和函数写进去。
vue-property-decorator 提供了 Mixins 的装饰器，在业务页面中引入 Mixin 只需要往里 Mixins 传入 ， 可以传多个，表示混入多个 Mixin。
如果只需要一个的话，也可以直接继承
在遇到功能点多，代码量大的页面时，我们可以利用 Mixin 抽离一些功能点，通过文件去管理这些功能，这样会比较方便去管理代码。
组件在加载都是同步的，但当页面内容很多，有些组件并不需要一开始就加载出来的比如弹窗类的组件，这些就可以用动态组件，当用户执行了某些操作后再加载出来，这样可以提高主模块加载的性能， 在 Vue 中可以使用 component 动态组件， 依 is 的值，来决定哪个组件被渲染。
示例代码中，只有当点击的时候才会去加载组件。component 还可以配合 v-show 去控制显示和隐藏，这样这个component 只会 mounted 一次，优化性能。
有很多场景想更改 UI 组件样式，然后怕影响别人的使用，加上 scoped 后又不能生效，可以使用 ::v-deep 深度作用选择器去修改组件作用域内的 CSS 的样式。在 CSS 中我们可以使用 >>> 操作符，但在预处理器中的写法就要用 /deep/ 或 ::v-deep。
::v-deep 和 /deep/ 作用是一样的，但不推荐使用 /deep/， 在 Vue3.0 中将不支持 /deep/ 这种写法。
装饰器增加了代码的可读性，清晰地表达了意图，而且提供一种方便的手段，增加或修改类的功能，比如给类其中的方法提供防抖的功能。
这样的好处是使用起来非常方便，另外增加了代码的可读性。
关于 require.context，webpack 文档是这么描述的：可以给这个函数传入三个参数：一个要搜索的目录，一个标记表示是否还搜索其子目录， 以及一个匹配文件的正则表达式。
webpack 会在构建中解析代码中的 require.context() 。如果想引入一个文件夹下面的所有文件，或者引入能匹配一个正则表达式的所有文件，这个功能就会很有帮助根据这个提示，我们可以引用到一个文件夹下面的所有文件，由此可以利用获取的文件信息去做一些操作，比如在注册组件的时候，原本我们注册组件的时候需要一个个引入并且一个个注册，而且后面想加新的，又要再写上，现在可以通过 require.context 去优化这一段代码。
注册全局组件的时候，不需要一个一个 import，和一个个去注册，使用 require.context 可以自动导入模块，这样的好处在于，当我们新建一个组件，不用自己再去手写注册，而在一开始就帮我们自动完成。
Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。“Vue项目常用的技巧有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注百云主机网站，小编将为大家输出更多高质量的实用文章！

相关推荐: Vue如何实现一个可复用组件

本篇内容主要讲解“Vue如何实现一个可复用组件”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue如何实现一个可复用组件”吧!构成组件组件，是一个具有一定功能，且不同组件间功能相对独立的模块。组件可以是一个按钮、一…