vue高阶组件业务封装（vue的组件封装）

今天给各位分享vue高阶组件业务封装的知识，其中也会对vue的组件封装进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、umi 配置路由的高阶组件封装。不生效问题
• 2、vue和react的区别之我见
• 3、vue 高阶组件必备知识$attrs，inheritAttrs，$listenters详解
• 4、浅谈vue项目进阶开发-vuex篇

umi 配置路由的高阶组件封装。不生效问题

我们来看下关于umi  路由配置老一点的写个啊~ 上个图吧

然后看了下官方更新的文档，上个图吧。

测试之后发现没有问题了

vue和react的区别之我见

react和vue都是做组件化的，整体的功能都类似，但是他们的设计思路是有很多不同的。使用react和vue，主要是理解他们的设计思路的不同。

react整体是函数式的思想，把组件设计成纯组件，状态和逻辑通过参数传入，所以在react中，是单向数据流，推崇结合immutable来实现数据不可变。react在setState之后会重新走渲染的流程，如果shouldComponentUpdate返回的是true，就继续渲染，如果返回了false，就不会重新渲染，PureComponent就是重写了shouldComponentUpdate，然后在里面作了props和state的浅层对比。

而vue的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。

总之，react的性能优化需要手动去做，而vue的性能优化是自动的，但是vue的响应式机制也有问题，就是当state特别多的时候，Watcher也会很多，会导致卡顿，所以大型应用（状态特别多的）一般用react，更加可控。

react的思路是all in js，通过js来生成html，所以设计了jsx，还有通过js来操作css，社区的styled-component、jss等，

vue是把html，css，js组合到一起，用各自的处理方式，vue有单文件组件，可以把html、css、js写到一个文件中，html提供了模板引擎来处理。

react是类式的写法，api很少，

而vue是声明式的写法，通过传入各种options，api和参数都很多。所以react结合typescript更容易一起写，vue稍微复杂。

react可以通过高阶组件（Higher Order Components--HOC）来扩展，而vue需要通过mixins来扩展

一个react高阶组件的例子：

react做的事情很少，很多都交给社区去做，vue很多东西都是内置的，写起来确实方便一些，

比如 redux的combineReducer就对应vuex的modules，

比如reselect就对应vuex的getter和vue组件的computed，

vuex的mutation是直接改变的原始数据，而redux的reducer是返回一个全新的state，所以redux结合immutable来优化性能，vue不需要。

上面主要梳理了react和vue的4点不同：

（其中第3点在vue3.0支持类式写法之后就可以去掉了）

react整体的思路就是函数式，所以推崇纯组件，数据不可变，单向数据流，当然需要双向的地方也可以做到，比如结合redux-form，而vue是基于可变数据的，支持双向绑定。react组件的扩展一般是通过高阶组件，而vue组件会使用mixin。vue内置了很多功能，而react做的很少，很多都是由社区来完成的，vue追求的是开发的简单，而react更在乎方式是否正确。

vue 高阶组件必备知识$attrs，inheritAttrs，$listenters详解

vue 默认情况下，父组件是可以直接给子组件的根元素添加 class 和 style 的，但是有时候我们可能需要在父组件上给子组件添加一些特性绑定( attribute bindings )(我的理解是自定义属性和一些原生属性)到子组件的根元素上， inheritAttrs 就是用来控制子组件根元素上是否允许添加父组件在子组件上定义的特性属性，因为 inheritAttrs 默认为 true ，所以我们在父组件中给子组件添加所有特性绑定，都能绑定到根元素，例如下面

渲染后的dom节点：

把 inheritAttrs 设为 false 后，

渲染后的dom节点：

可以得出上述的结论， inheritAttrs 是用来控制子组件根元素上是否允许添加父组件在子组件上定义的特性属性。

注意：

我们可以把父作用域中传递的所有属性看作一个大的对象 obj ，而 $attrs 会继承 obj 中的一部分属性，这一部分属性的 key 不能为 class ，和 style ，也不能是当前组件声明的 props 值，并且父组件为 v-model 的话，也是不能继承指令封装的 value 值的，若当前组件无props设置， $attrs 则继承除 class 和 style 的所有属性。

通常我们给已封装的组件进行中间处理的时候使用，例如 element-ui 的 el-input ，我们需要把父组件中的传递的 props 直接给子组件的子组件的时候，我们就可以用到 $attrs ，例如：

父组件为：

子组件为：

根据上面所说，去掉 class ，去掉指定的 value ，去掉子组件 props 声明的 limit ，那时我们此的 $attrs 是：

我们对ui框架中的组件进行再封装的时候，例如element-ui中的组件 el-input ，我们把他封装到我们自己的组件内部。

例如 self-input 组件如下，

我们需要把 el-input 组件上自定义的事件传递进去，那么就要用到 $listenters 。

官网的描述：

很容易理解， .native 是给子组件根元素添加事件，自然不是用来传给子组件上的子组件或元素。而我们在父组件上给子组件绑定的所有事件，都会放入 $listeners 中，我们可以在子组件中手动过滤修改后传给子组件中的子组件或者元素上，也可以用 v-on="$listeners" ，直接全部传给子组件或者元素上。

用法也相当简单，例如：

父组件：

子组件：

由于父组件传入的是一个change事件和两个input事件，那我们打印的 this.$listeners 是

下面是一个关于限制小数点的完整demo，感兴趣的可以了解一下

浅谈vue项目进阶开发-vuex篇

1.vuex的优缺点

2..vuex的使用

先上目录结构：

项目中想要管理的数据和状态都在这

连接actions和mutations的桥梁（操作数据的指令）

处理数据，操作状态，获取数据都在这，同步去处理数据对应的调用方法 commit

要改变数据时直接用this.$store.commit(SET_LOGIN_MSG, loginMsg)即可

对于一些接口数据，可能需要在组件内异步得去处理一些事情，这时候就需要写在这里，对应的调用方法是dispatch，需要注意的是：它提交的是mutation，不做数据和状态的更改，这些操作在mutations中处理

这里的参数 context 是对象{commit, state},后一个参数是你需要传的数据

对应的在组件内调用方法

由于是异步得所有可以用promise封装使用，解决callhack

以上方法就可以完成vuex的整个状态管理了，完全没有任何问题。但有时候会有一些需求，比如变量name需要在firstName和lastName其中任何一个发生变化时同时发生变化，如果在组件内我们使用computed就能做到，在vuex需要我们的getters登场

Module

到这就完了吗？并没有。如果是大型项目，你会发现需要使用vuex的数据太多了，然而把所有的数据处理全部放在 mutations.js文件中显得很杂乱，并不利于查找与管理，此时我们就需要Module,分模块管理。怎么做呢？

mod1和mod2就是 被分成的两个子模块。因为每个子模块数据和状态不会太多，因此我们把state，mutations，actions，getter写在一个文件中如下

mod1.js

mod2.js也是如此

那么如何调用呢？

更新数据的方法会有所变化吗？依然按照原来的方法使用就行了

总结：

将store进行拆分，有利于我们更好的管理项目中的状态，以及使我们的项目维护更加加单高效。各个模块之间的开发互相不影响。

3.vuex的注意点

a.在以往我们更新数据时为了防止数据随时变化所以会在更新组件时及时更新数据，甚至每隔一段时间更新数据，有了vuex就无需这么做了，我们只要在我们更改数据时更新一下数据即可。如用户的基本信息，我们只在用户对用户信息进行修改或增加时更新即可，这样在任何组件中使用用户信息时数据都是最新的。

b.使用vuex我们在组件内更改数据是无效的。例如：this.$store.state.name=‘小明‘，这么做会报错。

vue高阶组件业务封装的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue的组件封装、vue高阶组件业务封装的信息别忘了在本站进行查找喔。