学习
实践
活动
专区
工具
TVP
写文章
专栏首页iOS开发干货分享小白也能秒懂Vue源码中那些精细设计(选项处理)

小白也能秒懂Vue源码中那些精细设计(选项处理)

我"崩"不住了,在彭凡同志锲而不舍的催促下这篇文章终于"蛋"生了。说正经的这篇文章不好写,不好写的原因是我不太擅长写这些类比文,但它还是写出来了。相信大部分人都有开发过功能插件,在写插件的时候普遍应用基本思想是以"默认配置为优先,以用户配置为覆盖"。如果你觉得简单先别着急穿裤子走人继续往下看看。

$("form").Validator();

之前写过一个轻量级数据校验插件使用非常简单,你只需要找到form表单节点调用调用Validator 方法即可,就能在文本框中输入值进行自定校验。

$("form").Validator({
initEvent: "change", //自定义校验事件
  password: "* 密码必须是6-12个字符且包含大小写字母" //自定义密码校验失败错误信息
});

当然也会给用户相对的自由度如"校验事件、错误提示信息 ..."你只需要按照规定来配置就好了。

在写Vue代码的小伙伴同样要写很多的选项:"el、data、props、template、render、mounted..." 那Vue在处理这些选项也是使用"非黑即白"的处理思想吗?明确的说没有 Vue 在处理选项有非常多限制如:

  • el 只在用 new 创建实例时生效。
  • data 组件的定义只接受function。
  • 直接在 DOM中使用组件时,组件名只有是 kebab-case 才有效。
  • 生命周期钩子...

也就是说在Vue 中"非黑即白"的思想并不适用,Vue需要针对特殊选项做不同的处理,有的选项处理逻辑是再此能不能用,有的选项处理逻辑是校验Value合法性,有的选项的逻辑是需要合并处理。.... 这种处理方式比较官方的说法叫"选项自定义策略处理"。

选项自定义策略处理

在讲选择自定义策略处理之前先说说vm.$option实例属性,它是用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用处:

var vm = new Vue({
el: "#app",
data: {
message: "hello Vue",
},
count: 9,
})

输出vm.$option:

{
el: "#app",
  data: function mergedInstanceDataFn(){},
count: 9
}

有没有感觉奇怪在实例初始化选项中data的值是一个对象,为什么vm.$option中data的值变成一个函数了?开始揭秘...

Vue构造函数

function Vue(options) {
if (!(this instanceof Vue)) {
    warn('Vue is a constructor and should be called with the `new` keyword');
  }
this._init(options);
}

在创建Vue实例的时候你传递进来的自定义选项对象会传递给this._init这个方法。

Vue.prototype._init = function(options) {
var vm = this;
//省略...
  vm.$options = mergeOptions(
    resolveConstructorOptions(vm.constructor),
    options || {},
    vm
  );
//省略...
}

vm.options 属性定义在Vue.prototype._init 原型方法中。vm.options的值是调用mergeOptions函数的返回值。

mergeOptions

function mergeOptions(parent, child, vm) {
//省略...
var options = {};
var key;
for (key in parent) {
    mergeField(key);
  }
for (key in child) {
if (!hasOwn(parent, key)) {
      mergeField(key);
    }
  }

function mergeField(key) {
var strat = strats[key] || defaultStrat;
    options[key] = strat(parent[key], child[key], vm, key);
  }
return options
}

先来看看调用mergeOptions的三个参数。

  • resolveConstructorOptions - 这个函数的作用是用来获取当前实例构造者的 options 属性(注:涉及到组件相关的内容暂时不解释,在此你可以默认他传递是一个纯对象)
  • options - 自定义选项对象
  • vm - Vue实例

mergeOptions 最终返回的是在函数内置的options纯对象。options 所拥有的属性就是调用mergeField函数传递进来的key。

举个栗子:

你在创建Vue的根实例,并且传递了一个自定义选项对象。

var vm = new Vue({
el: "#app",
data: {
message: "hello Vue",
},
count: 9,
})

自定义选项对象会作为实参传递给mergeOptions函数的child形参。

for (key in child) {
if (!hasOwn(parent, key)) {
    mergeField(key);
  }
}

通过for..in.. 语句把child对象上可枚举的属性名作为参数传递给mergeField。

hasOwn是检测关于组件中父实例中是否key属性如果有将不会重复的调用mergeField,因为父子组件实例中相同的属性只需要做一次策略处理就可以了。(注:不扩展讲解)

当前栗子中"el"、"data"、"count" 这三个属性名作为字符串会作为参数传递给mergeField函数。那在mergeField函数中会给options 扩展 options.el = undefined 、 options.data = undefined 、 options.count = undefined 三个属性,为什么这三个属性的值都是undefined的呢?

原因是他们的value都需要通过调用 strat(parent[key], child[key], vm, key) 函数返回值来确定所以都暂定undefined,那strat 是什么?

var strat = strats[key] || defaultStrat;

strats是自定义策略对象,strats[key]是检测在这个自定义策略对象上有没有[key]这个属性,如果有就表示针对[key]属性写了策略函数反之就没写。

defaultStrat 默认策略函数

var defaultStrat = function(parentVal, childVal) {
return childVal === undefined ?
    parentVal :
    childVal
};

默认策略函数要弄懂它你只需要明白parentVal 、childVal 这两个参数。

  • parentVal 就是在调用strat 传递进来的parent[key],因为我们默认parent为纯函数所以parentVal 永远为undefined。
  • childVal 就是在调用strat 传递进来的childVal[key],也就是自定义选项对象中的[key]属性的值。

strats 自定义策略对象

var strats = config.optionMergeStrategies;

strats 是获取了config 全局配置对象上optionMergeStrategies属性的值。

var config = {
optionMergeStrategies: Object.create(null)
//省略...
}

你是不是觉得奇怪为什么不直接通过字面量方式创建一个纯对象赋值给strats,而要通过Object.create(null)创建纯对象。这样不麻烦了吗? 问题暂时保留。往下看Vue中自定义的策略函数。

strats.el = strats.propsData = function(parent, child, vm, key) {
if (!vm) {
    warn(
"option \"" + key + "\" can only be used during instance " +
'creation with the `new` keyword.'
    );
  }
return defaultStrat(parent, child)
};

strats.data = function(parentVal, childVal, vm) {
if (!vm) {
if (childVal && typeof childVal !== 'function') {
      warn(
'The "data" option should be a function ' +
'that returns a per-instance value in component ' +
'definitions.',
        vm
      );

return parentVal
    }
return mergeDataOrFn(parentVal, childVal)
  }

return mergeDataOrFn(parentVal, childVal, vm)
};


//省略...

可以看到Vue中对"el", "data","watch","props"等等....选项都写了策略函数。在回归到mergeField函数你是否能顿悟了。

function mergeField(key) {
var strat = strats[key] || defaultStrat;
  options[key] = strat(parent[key], child[key], vm, key);
}

如果某个选项写了策略函数那么就会调用这个策略函数,返回值会成为options[key] 的value。最后:mergeOptions 函数执行完毕返回options引用给到vm.$options。

现在来解释刚刚的那个问题。为什么不直接通过字面量方式创建一个纯对象赋值给strats,而要通过Object.create(null)创建纯对象?原因是Vue想给用户自定义选项自由度,也能添加策略函数。

举个栗子:

你在创建Vue的根实例,并且传递了一个自定义选项对象。

var vm = new Vue({
el: "#app",
data: {
message: "hello Vue",
},
count: 9,
})

我想针对count写个添加策略函数怎么办。

Vue.config.optionMergeStrategies._my_option = function(parentVal, childVal, vm) {
return childVal >= 99 ? childVal : 99
}

这个策略函数很简单,监听childVal的值: 如果大于99返回本身,小于99 返回99。count策略函数返回值给到vm.$options.count。

那Vue.config是怎么访问到的呢?

function initGlobalAPI(Vue) {
// config
var configDef = {};
  configDef.get = function() {
return config;
  };
  configDef.set = function() {
    warn(
'Do not replace the Vue.config object, set individual fields instead.'
    );
  };

Object.defineProperty(Vue, 'config', configDef);
}
initGlobalAPI(Vue);

你细品这个代码。

文章分享自微信公众号:
web前端小剧场

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

作者:李李
原始发表时间:2020-07-04
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 他写出了 Vue,却做不对这十道 Vue 笔试题

    请原谅我起了这么个浓浓营销号味道的标题。但这可丝毫没有夸大宣传,而是前端娱乐圈今日份的瓜——

    苏南
  • 【Vue原理】Vue源码阅读总结大会 - 终

    终于啊终于啊,把 Vue 系列的文章发完了了,如释重负的感jio啊,今天就打算总结下,我这段时间来的历程和收获,本文纯吹水,没有技术含量,各位客官权当娱乐消遣也...

    神仙朱
  • 前端职场腹黑学:醉心于编程的你被腹黑了吗?

    前言 2018刚开年,职场上、公司里本应该是一片喜气洋洋的和谐氛围。结果,某晚的一次深度聊天,让我对程序员的职场有了个重新的认知。我在想,程序员不就是敲个代码...

    闰土大叔
  • iOS 开发者的 Weex 伪最佳实践指北

    这篇文章是笔者近期关于Weex在iOS端的一些研究和实践心得,和大家一起分享分享,也算是对学习成果的总结。文章里面提到的做法也许不是最佳实践,也许里面的方法称不...

    一缕殇流化隐半边冰霜
  • 「后端小伙伴来学前端了」记录自己的踩坑第一天 | CSS:vertical-align 属性

    最近老师让大家单独写前后端分离项目,真是大家卷完后端,一起去卷前端了。(我以前都是主要负责后端,处于只大致看的懂的级别,说多了都是泪啊)。

    宁在春
  • 还在为怎么学习Android苦恼?看完学会这些大牛资料,2年高级3年资深不是问题!

    编程这条路能走多远,能走多久,就看一点:你学不学的明白。想学明白,就得看你会不会学习,所以编程能干多久,你值多少钱,最终看你会不会学习。

    Android技术干货分享
  • 打破原则引入SQL,MongoDB到底想要干啥???

    点击上方“芋道源码”,选择“设为星标” 管她前浪,还是后浪? 能浪的浪,才是好浪! 每天 10:33 更新文章,每天掉亿点点头发... 源码精品专栏 原创 |...

    芋道源码
  • 【阅读清单】有奖内测体验活动

    完成了内测体验的小伙伴,可以填写问卷,活动结束后我们将统一进行审核,审核结束就进行礼品发放。问卷链接:https://wj.qq.com/s2/7433898/...

    腾讯云开发者社区
  • 【Vue原理】Watch - 源码版

    没错,当你调用 Vue 创建实例过程中,会去处理各种选项,其中包括处理 watch

    神仙朱
  • Jenkins 入门实战:GitHub Push触发Jenkins自动构建

    官方介绍[1]:Jenkins 是一款开源 CI&CD 软件,用于自动化各种任务,包括构建、测试和部署软件

    GopalFeng
  • Vue框架设计的核心要素

    携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第2天,点击查看活动详情

    虎妞先生
  • 写给前端的零基础编译原理科普

    昊昊是一个前端工程师,最近涉及到工程化领域,想了解一些编译的知识。恰好我比他研究的早一些,所以把我了解的东西给他介绍了一遍,于是就有了下面的对话。

    Nealyang
  • vue3中可以帮助你早点下班的9个开发技巧!

    vue3也发布很长时候了,官方也将默认版本切换为vue3,而且也出现了完善的中文文档,不知同志们是否已经使用了了呢?

    用户7413032
  • 终于有人把Python数据分析必备的3大神器,一次性说清了!

    “大数据”时代,数据分析岗位需求逐步增多,薪资也从最初的月薪1W到月薪5W。 不过从招聘网站上可以看出,高薪行业对数据分析能力要求也越来越严格,尤其是字节、阿...

    张俊红
  • 后台管理UI的选择

    最近要做一个企业的OA系统,以前一直使用EasyUI,一切都好,但感觉有点土了,想换成现在流行的Bootstrap为基础的后台UI风格,想满足的条件应该达到如下...

    张果

扫码关注腾讯云开发者

领取腾讯云代金券