21天完美搞定Vue框架技术(第1天)

1、Vue本质上是一个构造函数,只能通过new调用

function Vue (options) {
    // 保证了无法直接通过Vue()去调用,只能通过new的方式去创建实例
    if (!(this instanceof Vue)) {
        warn('Vue is a constructor and should be called with the `new` keyword');
    }
    this._init(options);
}
return Vue;

2、Vue有5个原型属性和方法
init方法(内部方法):initMixin(Vue)
数据相关:stateMixin(Vue)
事件相关:eventsMixin(Vue)
生命周期相关:lifecycleMixin(Vue)
渲染相关:renderMixin(Vue)

3、Vue的静态属性和方法
配置方法:Vue.config()
内部工具方法:Vue.util()
Vue.set()
Vue.delet()
Vue.nextTick()
Vue.use()
Vue.mixin()
扩展子类构造器:Vue.extend()
默认选项:Vue.components,Vue.directive,Vue.filter

4、Vue构造器的默认选项
Vue默认选项会保留在静态的options属性上,有4个默认选项:
components:组件,如keepAlive,transition,transitionGroup的内置组件
directive:指令,如v-model、v-show等
filter:过滤器,没有默认值
_base:返回自身构造器,即Vue.options._base = Vue;

5、实例化Vue做的核心操作便是执行原型上的_init方法进行初始化
初始化包括:选项合并配置,初始化生命周期,初始化事件,初始化数据等。
其中第一步也是很关键的一步就是对选项的合并。
选项合并的本质就是用户自身传递的options选项和Vue构造函数自身的选项配置合并。

6、选项合并过程中需要做规范验证
components规范检验
注册组件时的检验,例如:组件名不能用html保留的标签(如:img,p),也不能包含非法的字符等。
props规范检验
数组形式 { props: ['a', 'b', 'c'] },
对象形式 { props: { a: { type: 'String', default: 'prop校验' } }}
两种形式最终都会转换成对象的形式
inject规范检验
依赖注入检验,provide/inject他们是一对组合,作用是后代都能访问到父代注入的数据/方法
directive规范检验
使用指令时的检验,vue提供了五个钩子函数bind, inserted, update, componentUpdated, unbind

7、子类构造器
Vue提供了一个Vue.extend的静态方法,它是基于基础的Vue构造器创建一个“子类”,而这个子类所传递的选项配置会和父类的选项配置进行合并。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,440评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,814评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,427评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,710评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,625评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,014评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,511评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,162评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,311评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,262评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,278评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,989评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,583评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,664评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,904评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,274评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,856评论 2 339

推荐阅读更多精彩内容

  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,193评论 0 6
  • 本章内容:表单 与 v-model、组件、自定义指令 六、表单 与 v-model 6.1、基本用法 Vue.js...
    了凡和纤风阅读 872评论 1 2
  • 亲爱的第十七期形象管理班的伙伴们,大家好! 我是第十五期形象管理班的复训学员——柯丽 通过以往的学习,使我更了解自...
    shenqimeng阅读 270评论 1 1
  • 看到一幅合成图片,感觉很有趣,于是准备用彩铅画出来。先涂黑背景,用的大号签字水笔。接下来仔细刻画黄猫,最后勾勒出殷...
    语儿渣画阅读 129评论 0 1
  • 今天刚看完一本书,《少年的你,如此美丽》,起初看这本书是因为这是大佬和冬叔主演的电影原著小说,应该是个好故事,也挺...
    花明啊阅读 974评论 5 4