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

逻辑根系
• 阅读 1624

前言:
实例化Vue的核心是做_init方法的初始化
初始化的关键一步是选项的合并
合并的本质就是用户自定义选项和Vue自带默认选项的合并
所以,今天我们要学习的就是关于选项合并的一些知识

1、Vue当中每种选项合并都有定义好的合并策略
合并策略原则:
(1)如果父类组件和子类组件有相同的选项,直接合并
(2)如果父子组件没有相同选项,子类组件有取子组件,没有子组件取父组件

2、选项合并的种类
包括大致5大类,分别是:
常规选项合并,如data、el合并
默认资源选项合并,如components、directives、filter
生命周期钩子函数合并,如mounted, created, destoryed
数据侦听选项合并,即watch
方法及属性选项合并,如props、methods、inject、computed

3、el的合并策略
el的作用:找一个DOM元素,让Vue实例挂载到上面
合并策略:只在创建Vue实例才存在,在子类或者子组件中无法定义el选项

4、data的合并策略
(1)父子类关系
先对data选项规进行范校验,保证它是一个函数
合并策略:
子类不存在data选项,则合并结果为父类data选项
父类不存在data选项,则合并结果为子类data选项
同时存在进行合并,如果冲突,保留子类data选项
(2)存在Vue根实例
Vue实例的data选项是一个对象
合并策略:
实例中不传递data时,默认返回Vue构造函数上的data属性选项
实例中传递data时,将实例的data对象和Vue构造函数上的data属性选项合并

5、components、directives、filter合并策略
(1)创建一个空对象且让这个空对象的原型指向父类选项
(2)将子类选项赋值给这个空对象
其实,说白了就是让子类选项继承父类选项

6、生命周期钩子函数合并策略
生命周期函数有12个,分别是:
'beforeCreate',
'created',
'beforeMount',
'mounted',
'beforeUpdate',
'updated',
'beforeDestroy',
'destroyed',
'activated',
'deactivated',
'errorCaptured',
'serverPrefetch'
合并策略:
(1)父子类的选项必须都是函数
(2)子类和父类有相同钩子选项,合并为数组,子类选项在数组末尾,晚于父类选项执行
(3)子类不存,返回父类选项
(4)子类存在,父类不存在,返回子类钩子选项,形式为数组

7、watch选项合并
watch作用:在数据变化时,使用自定义的侦听器来响应数据的变化
合并策略:
(1)没有父则直接用子选项
(2)没有子,则默认用父选项
(3)都有时合并成数组,数组的元素可以是回调函数,选项对象,或者函数名

8、props、methods、inject、computed合并策略
(1)父类不存在,返回子类选项
(2)子类父类都存在,子类选项去覆盖父类选项

后记
赠人玫瑰,手有余香!如果觉得文章对您有帮助,
请给一个大大的赞,还可以分享让更的人知道哦!
您也是web前端学习者,可以加VX:qingyulan52
最后祝您学习进步,早日成为技术大拿!!!

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

点赞
收藏
评论区
推荐文章
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Wesley13 Wesley13
4年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Jacquelyn38 Jacquelyn38
4年前
Vue 3.0 有哪些新特性值得我们提前了解
一、迎接Vue3.01\.简介在这里插入图片描述Vue.js作者兼核心开发者尤雨溪宣布Vue3.0进入Beta阶段。已合并所有计划内的RFC已实现所有被合并的RFCVueCLI现在通过vueclipluginvuenext提供了实验性支持2\.新特性重点关注:更快更省
Chase620 Chase620
4年前
Vue方向:prop验证
我们可以为组件的prop指定验证规则,如果传入的数据不符合要求,Vue会发出警告,这对于开发给他人使用的组件非常有用。要指定验证规则,需要用对象的形式来定义prop,而不能用字符串数组;1、验证父组件传递过来的数据类型props选项值如果为数据,则表示只是单纯的罗列父组件传递过来的数据而已如果props选项的值是一个对象,那么表示要验证接收的
Wesley13 Wesley13
4年前
MySQL学习——操作表
MySQL学习——操作表摘要:本文主要学习了使用DDL语句操作表的方法。创建表语法1createtable表名表定义选项表选项;表定义选项用来创建定义表的结构,由列名(col\_name)、列的定义(column\_definition)以及可能的空值说明、完
Wesley13 Wesley13
4年前
PHP二维数据排序,二维数据模糊查询
一、因为项目中的一个报表需要合并三个表的数据,所以分表查询再合并数据,利用PHP数组函数进行排序,搜索。三表合并后的数组结构如下:Array(0Array(history_id12sla_group_
Wesley13 Wesley13
4年前
Union Find
并查集是在各个不相交集合中查找某元素存在否,可以接近常数级查找例如,图的连通性,最近公共祖先等问题。一般用森林数组实现。一般有2个操作,查找(find)和合并(union)查找:从集合中查找元素x是否存在。合并:如果2个集合不想交则可以合并操作,一般方法是高度低的合并到高度高的。初始化每个元素都可以是一个单独的集合,然后不断引入关系来合并他
程序员小五 程序员小五
1年前
融云IM干货丨uni-app 有哪些组件库?
uniapp支持的组件库非常丰富,以下是一些常用的组件库:uView:这是一个知名的开源组件库,提供了丰富的组件,且完全开源。uViewPlus:uView的升级版,主要对标Vue3技术栈。ThorUI:组件选项类别丰富,主要对标Vue2技术栈,Vue3版
敏捷开发 敏捷开发
1年前
Linux 之父怒怼:无法解释的就是垃圾!
不出意外,Linus又开喷了,这次的激情开麦,源自一部分没有做注释的合并请求:Linux6.3内核收到了一部分合并请求,但这部分合并完全没有注释。如果你懒得解释为什么存在一个合并,那这个合并从本质上来说就是错误的垃圾,这是每个开发者都应牢记于心的规则。我重
贾蔷 贾蔷
6个月前
力扣面试题10.01:利用双指针法原地合并有序数组
一、题目解读10.01要求将两个有序A和B合并成一个有序数组,且合并结果需存储在数组A中(原地修改)。需确保合并后的A元素按升序排列,同时考虑A末尾可能存在无效元素(填充0)。核心挑战在于如何在O(mn)时间复杂度内完成合并,避免使用额外空间。二、解题思