Vue高阶组件、mixin、prop、hook

最新推荐文章于 2024-11-27 13:57:52 发布

原创最新推荐文章于 2024-11-27 13:57:52 发布 · 1.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #js

Vue 专栏收录该内容

2 篇文章

订阅专栏

Vue高阶组件

一、什么是高阶组件

高阶组件(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>