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

前言:
实例化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天)_第1张图片

你可能感兴趣的:(vue.js,前端,javascript)