Vue代码学习笔记（4）

最新推荐文章于 2024-10-08 17:48:41 发布

joker_21

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量72

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/joker_21/article/details/121021720

版权

高阶组件

简单来说，就是一个封装了一个或多个具体功能的组件，它与外界的联系只有简单的props，这样可以保证这个组件与其他组件的耦合度最低，可复用性强，并且不容易污染其他组件。

高阶函数和Mixins

高阶函数不会污染外部函数，可以在其他组件中被复用。如果确定组件只用在这个项目中，他只处理非常具体的任务，那么使用mixin也是可以的。

由于高阶函数与其他组件耦合度低，也使得它更好的进行测试，可以分别测试增强组件和内部组件，相反，使用Mixin时，你只能测试一个组件。

然而，有时候Mixin比高阶函数更容易掌握，当你使用了太多的高阶组件时，组件的层级会变得复杂，使得难以定位错误，还有搞清楚它们的层级关系，和他们之间的影响。而且，当你多层嵌套时，你需要注意属性需要经过多层传递，嵌套多层组件也会带来一些性能开销，使用mixin的话往往能节省这些开销，所以要视情况使用。

高阶函数的实现

<div id="app">
  <smart-avatar username="vuejs"></smart-avatar>
</div>

<script>
    // mock API
    function fetchURL (username, cb) {
        setTimeout(() => {
            // hard coded, bonus: exercise: make it fetch from gravatar!
            cb('https://avatars3.githubusercontent.com/u/6128107?v=4&s=200')
        }, 500)
    }

    const Avatar = {
        props: ['src'],
        template: `<img :src="src">`
    }

    //高阶组件
    function withAvatarURL (InnerComponent) {
        return {
            props: {
                username: String
            },
            data () {
                return {
                    url: 'http://via.placeholder.com/200x200'
                }
            },
            created () {
                //在这里进行请求
                fetchURL(this.username, (url) => { this.url = url })
            },
            render (h) {
                //渲染一个image标签，第二个参数给src传值
                return h(InnerComponent, { props: { src: this.url } })
            }
        }
    }

    const SmartAvatar = withAvatarURL(Avatar)

    new Vue({
        el: '#app',
        components: { SmartAvatar }
    })
</script>

参考视频：尤雨溪教你写vue 高级vue教程源码分析中文字幕翻译完毕_哔哩哔哩_bilibili

参考github：GitHub - zhengguorong/vue-advanced-workshop: Vue.js workshop hosted by Evan You through Frontend Masters