VUE - MVVM - part13 - inject & 总结

niuxiaowei111 发布于2019-08-22 17:12 / 2646人阅读

摘要：通过装作这些变化，我们实现了从而到达了数据变化触发函数的过程。于此同时，我们还实现了来扩展这个可响应的结构，让这个对象拥有了触发和响应事件的能力。最后，根据我们的实现，这是最终的产出，一个框架，了解一下系列文章地址优化优化总结

看这篇之前，如果没有看过之前的文章，移步拉到文章末尾查看之前的文章。

provide / inject

在上一步我们实现了，父子组件，和 props 一样 provide / inject 也是基于父子组件实现的，相比于 props 它的实现还要更简单一点。我们先来看看官网上对 provide / inject 的描述。

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

首先，由官网的例子可知，provide 的值是静态的，并不会去绑定到 data 中的内容。

so 静态的，简单~，那实现一下。

export class Vue extends Event {
    ···
    _init(options) {
        ···
        // 用实例下的 _provide 属性，保存传入的 provide
        vm._provide = vm.$options.provide

        // 从父组件的 _provide 取对应属性，若没有继续往上找，直到找到根节点
        // 若找到根节点还没有，就使用默认值
        let inject = vm._inject = {}
        for (let key in  vm.$options.inject) {
            inject[key] = getProvideForInject(vm, key, vm.$options.inject[key].default)
        }
        // 代理到 this 下
        for (let key in inject) {
            proxy(vm, "_inject", key)
        }
    }
}

测试代码：

import {Vue} from "./Vue.mjs"

let test = new Vue({
    provide: {
        foo: "bar"
    },
    components: {
        sub: {
            inject: {
                foo: {default: "foo"},
                bar: {default: "subBar"}
            },
            components: {
                subSub: {
                    inject: {
                        foo: {default: "foo"},
                        bar: {default: "subSubBar"}
                    }
                }
            }
        }
    }
})

let testSubClass = Vue.extend(test.$options.components.sub)
let testSub = new testSubClass({parent: test})

let testSubSubClass = Vue.extend(testSub.$options.components.subSub)
let testSubSub = new testSubSubClass({parent: testSub})

console.log(testSub.foo)
// bar
console.log(testSub.bar)
// subBar
console.log(testSubSub.foo)
// bar
console.log(testSubSub.bar)
// subSubBar

查看完整的代码

ok 其实这对属性的实现挺简单的，就是取值而已。

到此为止，Vue 中关于数据绑定的部分基本上实现的差不多了（不包括 directives/filters/slot/ref ···这些与页面渲染的东西）

但也有以下东西没实现内容简单就不过多的介绍了

mixins: 就是 options 的合并

生命周期函数: 在特定的时间触发特定名称的事件即可

$nextTick: 可以去看看 JS Event Loop 的相关内容，优先使用微任务来实现

接下来我们来想想，目前我们实现的东西都能干嘛？

总结

总的来说，我们实现了一个可响应的对象，我们可以拿到这个对象下数据的变化。

通过装作这些变化，我们实现了 Computed、Watcher 从而到达了数据变化触发函数的过程。

于此同时，我们还实现了 Event 来扩展这个可响应的结构，让这个对象拥有了触发和响应事件的能力。

最后我们实现了实例的树结构，在这个基础上实现了 props 和 provide/inject 。

那么还是那个问题，这个东西能干嘛用？

我想了想，前端的应用很明显，我们只要加一个视图层的渲染函数，就能补充成一个 MVVM 框架，Vue 也是在这个基础上实现的。当然你也可以实现自己虚拟节点，创造一个属于你自己的 MVVM 框架。

或者小型的项目，并不需要虚拟节点，那么绑定一个 HTML 渲染函数即可，所以我们实现的这个可响应结构对于 MVVM 来说，仅仅少了一层 VIEW ，所以我想叫 MVM 也是没问题的。

但是我想这个东西是纯 Js 的，所以能发挥的能力也肯定不仅仅是在前端，我之所以将这个完全的脱离模板来分析，也是想把这块多带带出来成为一个工具。

对于这个可响应结构，我想了想用处：

项目自动化配置，打包，初始化

根据配置筛选数据

···

对于第一点，假设我们有一个项目的配置（一个 js 对象），然后我们把这个对象变成响应结构，那么当这个对象发生变化的时候，比如说版本号变动，那么可以触发更新代码，打包编译代码，发送代码到服务等一些列的步骤。

对于第二点，假设在后端，我们有一堆数据，我们的需求是根据需求去筛选数据，比如 pageNo/pageSize 等等，那么我们可以根据需求定下一个 js 配置对象，然后针对每个属性添加一系列定义好的 Watcher ，那么我们就可以根据这个对象的变动执行特定的方法，而我们所需要做的仅仅是把配置对象的属性改一下就好，比如说当执行 obj.pageNo = 2 ，然后程序就自动的把对应的数据给筛选出来了。

当然，这个可响应的结构的用处远不至于此，只要以数据驱动或是配置化的地方，都有用武之地。

ok finally 这个系列的文章算是结束了，至于 VUE 中关于，模板解析和虚拟 DOM 的实现，会有多带带的系列，但模板解析大部分是在正则解析，所以可能会没有。

最后，根据我们的实现，这是最终的产出，一个 MVM 框架，了解一下？

系列文章地址

VUE - MVVM - part1 - defineProperty

VUE - MVVM - part2 - Dep

VUE - MVVM - part3 - Watcher

VUE - MVVM - part4 - 优化Watcher

VUE - MVVM - part5 - Observe

VUE - MVVM - part6 - Array

VUE - MVVM - part7 - Event

VUE - MVVM - part8 - 优化Event

VUE - MVVM - part9 - Vue

VUE - MVVM - part10 - Computed

VUE - MVVM - part11 - Extend

VUE - MVVM - part12 - props

VUE - MVVM - part13 - inject & 总结

云服务器 GPU云服务器 Injecting inject injection MVVM

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94963.html

VUE - MVVM - part12 - props

摘要：看这篇之前，如果没有看过之前的文章，移步拉到文章末尾查看之前的文章。而该组件实例的父实例却并不固定，所以我们将这些在使用时才能确定的参数在组件实例化的时候传入。系列文章地址优化优化总结看这篇之前，如果没有看过之前的文章，移步拉到文章末尾查看之前的文章。前言在上一步，我们实现 extend 方法，用于扩展 Vue 类，而我们知道子组件需要通过 extend 方法来实现，我们从测试例...

bluesky 2019-08-22 17:07 评论0 收藏0
VUE - MVVM - part10 - Computed

摘要：了解之后我们来实现它，同样的为了方便理解我写成了一个类这里的一般是的实例将属性代理到实例下的构造函数我们实现了代理属性和更新计算属性的值，同时依赖没变化时，也是不会触发的更新，解决了以上的个问题。看这篇之前，如果没有看过之前的文章，移步拉到文章末尾查看之前的文章。回顾先捋一下，之前我们实现的 Vue 类，主要有一下的功能：属性和方法的代理 proxy 监听属性 watche...

callmewhy 2019-08-26 11:53 评论0 收藏0
VUE - MVVM - part1 - defineProperty

摘要：在中关于如何实现在网上可以搜出不少，在看了部分源码后，梳理一下内容。换个说法，当我们取值的时候，函数自动帮我们添加了针对当前值的依赖，当这个值发生变化的时候，处理了这些依赖，比如说节点的变化。在 VUE 中关于如何实现在网上可以搜出不少，在看了部分源码后，梳理一下内容。首先，我们需要了解一下 js 中的一个 API :Object.defineProperty(obj, prop,...

liukai90 2019-08-22 16:12 评论0 收藏0
VUE - MVVM - part7 - Event

摘要：事件是什么在标准浏览器中，我们经常使用来为一个添加一个事件等。仔细看这些情况，归结到代码中，无非就是一个行为或情况的名称，和一些列的动作，而在中动作就是，一系列的动作就是一个函数的集合。看这篇之前，如果没有看过之前的文章，可拉到文章末尾查看之前的文章。事件是什么？在标准浏览器中，我们经常使用：addEventListener 来为一个 DOM 添加一个事件（click、mouse...

xialong 2019-08-22 16:39 评论0 收藏0
VUE - MVVM - part2 - Dep

摘要：看这篇之前，如果没看过先移步看实现中。同样的，在取值时收集依赖，在设置值当值发生变化时触发依赖。中实现了一个的类来处理以上两个问题，之后再说。以下语法下的，源码中差不多就这样点击查看相关代码系列文章地址优化优化总结看这篇之前，如果没看过 step1 先移步看实现 VUE 中 MVVM - step1 - defineProperty。在上一篇我们大概实现了，Vue 中的依赖收集和...

hover_lew 2019-08-22 16:12 评论0 收藏0