和尤雨溪一起进阶vue（二）

最新推荐文章于 2025-06-20 15:45:49 发布

转载最新推荐文章于 2025-06-20 15:45:49 发布 · 239 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c98549b5188252db756a5fa

文章标签：

#c/c++ #javascript #ViewUI

本文深入探讨Vue的插件开发、渲染函数、路由实现等高级主题，并通过实战案例展示Vue的灵活性和强大功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个系列文章将从下面几个方面来介绍vue

reactivity(响应式)
plugin(插件)
render(渲染函数)
routing(路由)
state-management(状态管理)
international(多语言支持) 上一篇文章已经介绍了第一部分响应式reactivity, 链接地址这篇准备介绍第插件，渲染函数以及路由, 这一部分代码很多，看不懂自己多动手敲敲

plugin

开发vue的插件很简单，官网上有非常详细的说明，对Vue插件不了解的人建议移步Vue官网教程插件

练个手吧，写个简单的表单验证插件

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<div id="app">
    <form @submit="validate">
        <input v-model="text">
        <br>
        <input v-model="email">

        <ul v-if="!$v.valid" style="color:red">
            <li v-for="error in $v.errors">
                {{ error }}
            </li>
        </ul>
        <input type="submit" :disabled="!$v.valid">
    </form>
</div>
<script>
const emailRE = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
const validationPlugin = {
    install(Vue) {
        // 全局注入的方法
        Vue.mixin({
            computed: {
                $v() {
                    const rules = this.$options.validations
                    let valid = true
                    let errors = [] 
                    Object.keys(rules || {}).forEach(key => {
                        const rule = rules[key]
                        const value = this[key]
                        const result = rule.validate(value)
                        if(!result) {
                            valid = false
                            errors.push(
                            rule.message(key, value)
                            )
                        }
                    })
                    return {
                        valid,
                        errors
                    }
                }
            }
        })
    }
}
Vue.use(validationPlugin)
new Vue({
  el: '#app',
  data: {
    text: 'foo',
    email: ''
  },
  validations: {
    text: {
      validate: value => value.length >= 5,
      message: (key, value) => `${key} should have a min length of 5, but got ${value.length}`
    },
    email: {
      validate: value => emailRE.test(value),
      message: key => `${key} must be a valid email`
    }
  },
  methods: {
    validate (e) {
      if (!this.$v.valid) {
        e.preventDefault()
        alert('not valid!')
      }
    }
  }
})
</script>
复制代码

render

我们来看看vue的渲染函数render

平时开发写vue文件都是用模板template的方法写html，模板会被编译成render函数，流程如下：

初始化的时候

模板会被编译成render函数
render函数返回虚拟DOM(virtual Dom)
生成真正的DOM

数据更新的时候

render函数返回新的virtual Dom
新的virtual Dom和旧的virtual Dom做diff
将差异运用到真实DOM

如果我们直接用render函数的方式而不是template，就可以免去模板编译成render函数的步骤，性能会更高

virtaul DOM

真正的DOM

创建方式： document.createElement('div')
内容： [document Element]
真实的DOM是浏览器引擎用C++实现的，我们无法操控，只是暴露出上面的JS接口供我们调用，操作很昂贵

virtual DOM

创建方式：vm.$createElement('div')
内容： {tag: 'div', data: {attr: {}}, children: []}
虚拟DOM就是js对象
操作cheap

render API

    render(h) {
        h(tag, data, children)
    }
复制代码

template, jsx, render本质都是一样的, 都是一种dom和数据状态之间关系的表示

用法：

    // tag可以是原生的html标签
    render(h) {
        return h('div', { attrs: {}}, [])
    }
 
    // 也可以是一个vue component
    import vueComponent from '...'
    render(h) {
        h(vueComponent, {
            props: {} 
        })
    }
复制代码

练手时间

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<div id="app">
    <example :tags="['h1','h2', 'h3']"></example>
</div>
<script>
    Vue.component('example', {
        props: ['tags'],
        render(h) {
            return h('div', {attrs: {
                class: 'hello'
            }},
            this.tags.map((tag, i) => h(tag, i))
            )
        }
    })
    new Vue({el: '#app'})
</script>

复制代码

函数组件

函数组件，其实是一个接收参数的函数，没有自己的状态，没有生命周期，不创建组件实例，也不可以在render里面调用this 练手时间

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<div id="app">
    <function-component :tags="['h1','h2','h3']"></function-component>
</div>
<script>
    // 函数组件的渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。
    // 这里我们用对象解构context
    const FunctionComponent = {
        functional: true, // 标记组件为 functional
        render (h, {props:{tags}}){
            return h('div', {attrs: {
                class:'function'
            }},
            tags.map((tag, i) => h(tag, i))
            )
        }
    }
    Vue.component('function-component', FunctionComponent)
    new Vue({el: '#app'})
</script>

复制代码

高阶组件

A higher-order component is a function that takes a component and returns a new component.

React的高阶组件很火，其实Vue也可以写高阶组件，我们可以写一个来看看

现在有一个组件Avatar

  const Avatar = {
        props: ['src'],
        template: `<img :src="src" />`
    }
复制代码

Avatar这个组件的功能就是接受src显示图片，它是一个非常简单的组件，没有其他多余的功能，很多地方都会使用这个组件，但是获取src的逻辑可能不一样，在父组件里面使用这个组件的时候，如果在父组件里面调取接口获取图片地址传递给它，那么就会污染了父组件，因为这不是父组件的逻辑

这个时候我们就可以创建一个高阶组件，根据不同逻辑进行封装，假设现在是根据username获取图片地址，我们来封装一个smart-avatar，我们在使用的这个组件的时候不需要传入完整图片路径，只需要传入username就可以。

一句话，高阶组件其实就是对简单的组件的和封装, 从而可以和父组件解耦

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<div id="app">
    <smart-avatar username="vuejs" id="hello">
        <div slot="foo">
            这是一个具名插槽
        </div>
    </smart-avatar>
</div>
<script>
    // mock API
    function fetchURL(username, cb) {
        setTimeout(() => {
            cb('https://avatars3.githubusercontent.com/u/6128107?v=4&s=200')
        }, 500)
    }
    const Avatar = {
        props: ['src'],
        template: `<img :src="src" />`
    }
    // 高阶组件withAvatarUrl
    function withAvatarUrl(innerComponent, fetchURL) {
        return {
            props: ['username'],
            data() {
                return {
                    url: `http://via.placeholder.com/200*200`
                }
            },
            created() {
                fetchURL(this.username, url => {
                    this.url = url;
                })
            },
            render(h) {
                // console.log(this.$slots.default);
                // console.log(this.$slots.foo);
                return h(innerComponent, {
                    props: {
                        src: this.url,
                        attrs: this.$attrs
                    }
                }, this.$slots.default)
            }
        }
    }
    const SmartAvatar = withAvatarUrl(Avatar, fetchURL);
    new Vue({
        el: '#app',
        components: {SmartAvatar}
    })
</script>
复制代码

路由

用过vue开发项目的应该都知道vue-router, url变化的时候会匹配对应的组件，其实原理就是hash事件的监控, 我们来看看不借助这个插件如何实现路由的功能

1 初级版

借助vue的动态组件，可以实现一个简单的路由功能，如下

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<div id="app">
    <a href="#foo">foo</a>
    <a href="#bar">bar</a>
    <component :is="url"></component>
</div>
<script>
    // 这是一个比较简单的解决方案，但是有一个问题,初始化的时候无法匹配
    window.addEventListener('hashchange', () => {
        app.url = window.location.hash.slice(1)
    });
    let app = new Vue({
        el: '#app',
        data() {
            return {
                url: null
            }
        },
        components: {
            foo: {template: `<div>foo-component</div>`},
            bar: {template: `<div>bar-component</div>`}
        }
    })
</script>
复制代码

2 改进版

解耦微改进一下，将路由提取到一个路由表中，

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<div id="app">
</div>
<script>
const Foo = {template: '<div>foo</div>'}
const Bar = {template: '<div>bar</div>'}
const NotFound = {template: '<div>not found</div>'}

// 在对象里面统一配置路由
const routeTable = {
    'foo': Foo,
    'bar': Bar

}
window.addEventListener('hashchange', () => {
    app.url = window.location.hash.slice(1)
})
let app = new Vue({
        el:'#app',
        data() {
            return {
                url: window.location.hash.slice(1)
            }
        },
        render(h) {
            return h('div', [
                h('a', {attrs: {href: '#foo'}}, 'foo'),
                '|',
                h('a', {attrs: {href: '#bar'}}, 'bar'),
                h(routeTable[this.url] || NotFound),
            ])
        }
})
</script>
复制代码

3 最终版

上面都是处理简单的url, 实际开发的时候，配置的路由都是多页面，多组件，路由的path也会比较长,如/a/b, /a/b/c, 还有动态路由，比如/a/:id，这个时候上面的方法就不能准确匹配了, 如果你是正则达人，你可以自己试试解析这些复杂的path，不是的话就使用别人封装好的第三方库吧，这里推荐path-to-regexp, 这个库的作用作者一句话就概述完了：

Turn a path string such as/user/:nameinto a regular expression

大家可以点进去链接了解一下用法，这里我们介绍接下来要用的部分

const keys = []
const regexp = pathToRegexp('/foo/:id', keys)
// regexp = /^\/foo\/((?:[^\/]+?))(?:\/(?=$))?$/i
// keys = [{ delimiter: "/", name: "id", optional: false, partial: false, pattern: "[^\/]+?", prefix: "/", repeat: false}]
// 得到了正则表达式regexp， 传入实际的url执行正则的exec方法
// 不匹配
const match1 = regexp.exec('/test/route'); // null
const match3 = regexp.exec('/foo');        // null
// 匹配
const match2 = regexp.exec('/foo/fooId'); // ["/foo/fooId", "fooId", index: 0, input: "/foo/fooId", groups: undefined]
复制代码

ok, 我们可以解析path了，来看看接下来如何实现

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
// 这里是下载到本地同目录引入的
<script src='./path-to-regexp.js'></script>
<div id="app"></div>
<script>
    const Foo = {
        props: ['id'],
        template: `<div>foo with id: {{id}} </div>`
    }
    const Bar = {
        template: `<div>bar</div>`
    }
    const NotFound = {
        template: `<div>not found</div>`
    }
    const routeTable = {
        '/foo/:id': Foo,
        '/bar': Bar,
    }
    // 处理路由
    const compiledRoutes = [];
    Object.keys(routeTable).forEach(path => {
        const dynamicSegments = []
        const regex = pathToRegexp(path, dynamicSegments)
        const component = routeTable[path]
        compiledRoutes.push({
            component,
            regex,
            dynamicSegments
        })
    })
    window.addEventListener('hashchange', () => {
        app.url = window.location.hash.slice(1);
    })
    const app = new Vue({
        el: '#app',
        data() {
            return {
                url: window.location.hash.slice(1)
            }
        },
        // 渲染那个路由，路由属性
        render(h) {
            const url = '/' + this.url
            let componentToRender
            let props = {}
            compiledRoutes.some(route => {
                const match = route.regex.exec(url)
                if (match) {
                    componentToRender = route.component
                    // 上一步已经可以匹配到url对应的组件了
                    // 这里多做一步，获取动态id作为props的属性传入组件
                    route.dynamicSegments.forEach((segment,index) => {
                        props[segment.name] = match[index+1]
                    })
                }
            })
             return h('div', [
                h('a', { attrs: { href: '#foo/123' } }, 'foo123'),
                '|',
                h('a', { attrs: { href: '#foo/234' } }, 'foo234'),
                '|',
                h('a', { attrs: { href: '#bar' } }, 'bar'),
                h(componentToRender || NotFound, { props })
            ])
        }
    })
</script>
复制代码