一、什么是高阶组件
高阶组件(HOC)是 React 生态系统的常用词汇,React 中代码复用的主要方式就是使用高阶组件,并且这也是官方推荐的做法。而 Vue 中复用代码的主要方式是使用 mixins,并且在 Vue 中很少提到高阶组件的概念,这是因为在 Vue 中实现高阶组件并不像 React 中那样简单,原因在于 React 和 Vue 的设计思想不同,但并不是说在 Vue 中就不能使用高阶组件,只不过在 Vue 中使用高阶组件所带来的收益相对于 mixins 并没有质的变化。
高阶组件是一个将组件作为参数并返回一个新组件的函数
二、高阶组件有什么特性
- 高阶组件(HOC)应该是无副作用的纯函数,且不应该修改原组件,即原组件不能有变动
- 高阶组件(HOC)不关心你传递的数据(props)是什么,并且新生成组件不关心数据来源
- 高阶组件(HOC)接收到的props应该透传给被包装组件即直接将原组件prop传给包装组件
- 高阶组件完全可以添加、删除、修改 props
三、举个例子
export const WithConsole = (WrappedComponent) => {
return {
mounted () {
console.log('打印------------------------------')
},
props: WrappedComponent.props,
render (createdElement) {
//组合子级虚拟节点
const slots = Object.keys(this.$slots)
.reduce((arr, key) => arr.concat(this.$slots[key]), [])
.map(vnode => {
vnode.context = this._self
return vnode
})
// 返回一个由createdElement方法生成的虚拟dom
return createdElement(
WrappedComponent,
// 一个与模板中属性对应的数据对象
{
on: this.$listeners, // 绑定的事件
props: this.$props, // 绑定的props参数对象 透传 scopedSlots
scopedSlots: this.$scopedSlots,
attrs: this.$attrs
},
// 子级虚拟节点
slots
)
}
}
}
四、mixin 混入
- 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
例子:
// 定义一个混入对象
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
// 定义一个使用混入对象的组件
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component() // => "hello from mixin!"
- 选项合并:当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。
// 这里有两个data,都有一个message,合并的时候,会用组件的goodbye,而hello不会被混入
var mixin = {
data: function () {
return {
message: 'hello',
foo: 'abc'
}
}
}
new Vue({
mixins: [mixin],
data: function () {
return {
message: 'goodbye',
bar: 'def'
}
},
created: function () {
console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" }
}
})
- 同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。
// 这里有两个钩子函数created,两个created会合并成一个数组,混入的created会先调用
var mixin = {
created: function () {
console.log('混入对象的钩子被调用')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('组件钩子被调用')
}
})
// => "混入对象的钩子被调用"
// => "组件钩子被调用"
- 值为对象的选项,例如 methods、components 和 directives,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。
// 这里有两个methods对象,conflicting同名了,只会调用组件的conflicting方法,不重名不影响
var mixin = {
methods: {
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
}
var vm = new Vue({
mixins: [mixin],
methods: {
bar: function () {
console.log('bar')
},
conflicting: function () {
console.log('from self')
}
}
})
vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"
- 全局混入:混入也可以进行全局注册。使用时格外小心!一旦使用全局混入,它将影响每一个之后创建的 Vue 实例。使用恰当时,这可以用来为自定义选项注入处理逻辑
// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
created: function () {
const myOption = this.$options.myOption
if (myOption) {
// console.log('myOption', myOption)
}
}
})
new Vue({
render: h => h(App),
myOption: 'hello!'
}).$mount('#app')
- 自定义选项合并策略-自定义选项将使用默认策略,即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并,可以向 Vue.config.optionMergeStrategies 添加一个函数:
//自定义选项合并策略
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
// 返回合并后的值
// console.log('toVal', toVal)
// console.log('fromVal', fromVal)
return fromVal + ',123'
}
五、prop
- HTML 中的 attribute 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名:
// 这两个是一样的
<component postTitle="123"></component>
<component post-title="123"></component>
- Prop 类型
// 可以这样写,但是没有指定类型
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
// 指定类型
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
- 传递静态或动态 Prop
//数字、布尔值、数组、对象 都需要使用v-bind
<component :number="123" :flag="false" :list="[1,2,3]" :obj="{a:1}"></component>
- 传入一个对象的所有属性
post: {
id: 1,
title: 'My Journey with Vue'
}
<component v-bind="post"></component>
//上面的相当于
<component
:id="post.id"
:title="post.title"
></component>
- 单向数据流
- 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。
- 额外的,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。
这个 prop 用来传递一个初始值;这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下,最好定义一个本地的 data 属性并将这个 prop 用作其初始值:
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
这个 prop 以一种原始的值传入且需要进行转换。在这种情况下,最好使用这个 prop 的值来定义一个计算属性
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
- Prop 验证
- 注意那些 prop 会在一个组件实例创建之前进行验证,所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的。
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
- 自定义type
// 传入的author类型必须是Person
function Person (firstName, lastName) {
console.log('firstName', firstName)
console.log('lastName', lastName)
}
Vue.component('blog-post', {
props: {
author: Person
}
})
8.非 Prop 的 Attribute
- 一个非 prop 的 attribute 是指传向一个组件,但是该组件并没有相应 prop 定义的 attribute。
因为显式定义的 prop 适用于向一个子组件传入信息,然而组件库的作者并不总能预见组件会被用于怎样的场景。这也是为什么组件可以接受任意的 attribute,而这些 attribute 会被添加到这个组件的根元素上。
例如,想象一下你通过一个 Bootstrap 插件使用了一个第三方的 组件,这个插件需要在其 上用到一个 data-date-picker attribute。我们可以将这个 attribute 添加到你的组件实例上:
//date-picker="activated" 会被添加到这个组件的根元素上。
<PropTest date-picker="activated"></PropTest>
- 对于绝大多数 attribute 来说,从外部提供给组件的值会替换掉组件内部设置好的值。所以如果传入 type=“text” 就会替换掉 type=“date” 并把它破坏!庆幸的是,class 和 style attribute 会稍微智能一些,即两边的值会被合并起来,从而得到最终的值:form-control date-picker-theme-dark。
// 子组件
<template>
<input style="color: #000;" type="number" class="classB"/>
</template>
// 父组件
<PropTest style="color: #42b983;background: black;" type="text" class="classA"></PropTest>
// 结果 type被替换 class合并 style合并以子组件为主
<input type="text" class="classB classA" style="color: rgb(66, 185, 131); background: black;">
- 禁用 Attribute 继承
Vue.component('my-component', {
inheritAttrs: false,
// ...
})
- 注意 inheritAttrs: false 选项不会影响 style 和 class 的绑定。
六、hook
- hook有三种类型:state hooks、 effect hooks、以及custom hooks。
- withHooks是一个高阶函数,传入一个函数,这个函数内部返回一个vnode, withHooks 方法返回的是一个vue的选项对象。
- useState返回一个数组,数组的第一项是状态state,第二个项是change state 的方法
<script>
import { withHooks, useState, useEffect } from "vue-hooks";
// a custom hook... 自定义一个hook
function useWindowWidth() {
// 用useState 声明width属性,和setWidth设置属性的方法
const [width, setWidth] = useState(window.innerWidth);
// 声明一个方法,通过setWidth改变width
const handleResize = () => {
setWidth(window.innerWidth);
};
// useEffect方法首次创建和更新都会调用
useEffect(() => {
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
}
}, []);
return width;
}
const Foo = withHooks(h => {
// state
const [count, setCount] = useState(0);
console.log(useState())
// effect
useEffect(() => {
document.title = "count is " + count;
});
// custom hook
const width = useWindowWidth();
return h("div", [
h("span", `count is: ${count}`),
h(
"button",
{
on: {
click: () => setCount(count + 1)
}
},
"+"
),
h("div", `window width is: ${width}`)
]);
});
export default {
name: 'hooks-test-index',
render(h) {
return h("div", [h(Foo)]);
}
}
</script>