config.js源码

module.exports = {
    prefix      : 'v',
    debug       : false,
    silent      : false,
    enterClass  : 'v-enter',
    leaveClass  : 'v-leave',
    attrs       : {}
}

思考

【评】这个文件会不会顾名思义，是用来配置一些属性的呢？

线索

【评】这个文件代码就比较少了，为什么会找到这里呢？以下是我的线索：

main.js

【评】一开始，我们不是找到了入口文件main.js了吗？

ViewModel.config = function (opts) {
    if (opts) {
        utils.extend(config, opts)
        if (opts.prefix) updatePrefix()
    }
    return this
}

【评】ViewModel对象config属性这里，我们可以它用到了utils对象extend方法。于是，我又去看了一下utils.js这个文件。

utils.js

var config    = require('./config'),
    attrs     = config.attrs,
    toString  = Object.prototype.toString,
    join      = Array.prototype.join,
    console   = window.console,
    ViewModel // late def

【评】看看第二行，config对象attrs属性赋值给了attrs变量，这样是不是简化了，或者是简写了呢？留个猜想。根据这个，所以就找到这个文件了。

关系

【评】这三个文件的关系可以用下面图来概括：

解释

【评】这个文件对外暴露了一个对象，这里面有好几个属性：prefix，debug，silent，enterClass，leaveClass，attrs 。

猜想

【评】根据这个配置对象，我有了以下猜想：

prefix

【评】这个属性的属性值是一个字符串'v'，再加上这个属性中文是前缀，那么它会不会是和vue的一些指令有关呢？我们看看我们平时用的vue指令，v-bind、v-on、v-if、v-model、v-show等等，你仔细观察就可以看到它们都有个共同的特点，没错，就是v-，是不是和这里的prefix属性的属性值为字符串v很吻合？那么这里的字符串'v'就是这些指令的前缀。这么说来，这些指令完全可以通过技术实现，然后用户输入了指令就可以实现一些功能，也就是方法，而方法的本质又是函数。所以我做了以下猜想实验：

const prefix = 'hzh';
var suffix = ['bind','on', 'if', 'model', 'show']; 
for(var i = 0; i < suffix.length; i++) {
    console.log(prefix + '-' + suffix[i]);
}

【评】因为它们有相同的部分字符串v和-，那么根据这里是用了一个属性存储了这个字符串，其实，属性本质上也是个变量。然后通过拼接字符串的方法，将v、-和那些后缀拼接在一起。

新的问题

【评】既然这些指令实现的是一些功能，那么它们会不会是一些函数呢？自己尝试了一下，发现函数的标识符不能用下面这些来命名。那么尤雨溪是使用了什么方法，就可以将后缀拼接在一起，又做到实现一些功能呢？留个猜想。

attrs

其他的先不管，我们先来看看这个属性，这个简写应该是属性，它的属性值是一个空对象。