Vue高阶组件、mixin、prop、hook

一、什么是高阶组件

高阶组件(HOC)是 React 生态系统的常用词汇,React 中代码复用的主要方式就是使用高阶组件,并且这也是官方推荐的做法。而 Vue 中复用代码的主要方式是使用 mixins,并且在 Vue 中很少提到高阶组件的概念,这是因为在 Vue 中实现高阶组件并不像 React 中那样简单,原因在于 React 和 Vue 的设计思想不同,但并不是说在 Vue 中就不能使用高阶组件,只不过在 Vue 中使用高阶组件所带来的收益相对于 mixins 并没有质的变化。

高阶组件是一个将组件作为参数并返回一个新组件的函数


二、高阶组件有什么特性

  1. 高阶组件(HOC)应该是无副作用的纯函数,且不应该修改原组件,即原组件不能有变动
  2. 高阶组件(HOC)不关心你传递的数据(props)是什么,并且新生成组件不关心数据来源
  3. 高阶组件(HOC)接收到的props应该透传给被包装组件即直接将原组件prop传给包装组件
  4. 高阶组件完全可以添加、删除、修改 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 混入

  1. 混入 (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!"

  1. 选项合并:当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。
// 这里有两个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" }
  }
})
  1. 同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。
// 这里有两个钩子函数created,两个created会合并成一个数组,混入的created会先调用
var mixin = {
  created: function () {
    console.log('混入对象的钩子被调用')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('组件钩子被调用')
  }
})

// => "混入对象的钩子被调用"
// => "组件钩子被调用"
  1. 值为对象的选项,例如 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"
  1. 全局混入:混入也可以进行全局注册。使用时格外小心!一旦使用全局混入,它将影响每一个之后创建的 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')
  1. 自定义选项合并策略-自定义选项将使用默认策略,即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并,可以向 Vue.config.optionMergeStrategies 添加一个函数:
//自定义选项合并策略
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
  // 返回合并后的值
  // console.log('toVal', toVal)
  // console.log('fromVal', fromVal)
  return fromVal + ',123'
}

五、prop

  1. HTML 中的 attribute 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名:
    // 这两个是一样的
  <component postTitle="123"></component>
  <component post-title="123"></component>
  1. 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
}
  1. 传递静态或动态 Prop
    //数字、布尔值、数组、对象 都需要使用v-bind
  <component :number="123" :flag="false" :list="[1,2,3]" :obj="{a:1}"></component>
  1. 传入一个对象的所有属性
post: {
  id: 1,
  title: 'My Journey with Vue'
}

 <component v-bind="post"></component>
 
 //上面的相当于
 <component
  :id="post.id"
  :title="post.title"
></component>
 
  1. 单向数据流
  • 所有的 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()
  }
}
  1. 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
      }
    }
  }
})
  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;">
  1. 禁用 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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值