介绍 & lt; div id=癮pp"比;
& lt;才能my-button> & lt;/my-button>
& lt;/div>
& lt; script>
,Vue.component (“my-button",, {
,,,模板:,“& lt; button>,按钮组件& lt;/button>“
,,});
let vm =, Vue ({new
艾尔:& # 39;#应用# 39;
});
& lt;/script> 全局组件解析原理
Vue.options._base =, vue;,//可以通过\ _base 找到,vue
Vue.options.components =, {},,
时间=Vue.component function (id,定义),{//每才能个组件产生一个新的类去继承父亲
时间=definition 才能;this.options._base.extend(定义);
console.log才能(“1。给组件创造一个构造函数,基于Vue",,定义);
this.options.components才能(id),=,定义;
,},vue 2.。扩展方法
import {mergeOptions},得到& # 39;. ./util/指数# 39;
时间=Vue.extend function (定义),{
const 才能;Vue =,;
const 才能;Sub =, function VueComponent(选项),{
,,this._init(选项);
,,};
时间=Sub.prototype 才能;Object.create (Vue.prototype);
时间=Sub.prototype.constructor 才能;接头;
Sub.options 才能=,mergeOptions (Vue.options,定义),,
return 才能;接头;
,}, 3。属性合并
strats.components =, function (parentVal, childVal), {
,let options =, Object.create (parentVal);
,if (childVal), {
for 才能;(let key childVal拷贝),{
,,选项(例子),=,childVal(例子);
,,}
,}
,return 选择;
}; 4。初始化合并
, Vue.prototype._init =, function (选项),{
const 才能;vm =,;
,+ + vm options 美元;=,mergeOptions (vm.constructor.options,选项),,//才能……
initState才能(vm);
if 才能;(vm。options.el美元),{
,,//将数据挂载到这个模版上
美元,才能vm。山(vm。options.el美元);
,,}
,}, 组件的渲染原理
export function isReservedTag (str), {
,let reservedTag =,, a, div、span, p, img,按钮,ul, li";
,return reservedTag.includes (str);
} 1。创建组件虚拟节点
export function createElement (vm,时间标签,大敌;;data =,{},,……孩子),{//才能,如果标签是组件,应该渲染一个组件的vnode
if 才能;(isReservedTag(标签),{
,,,return vnode (vm,,标签,,数据,data.key,,孩子,,未定义);
,,},{else
,,,const Ctor =vm。美元options.components[标记]
,,,return createComponent (vm,,标签,,数据,data.key,,孩子,,男星);
,,}
}//,创建组件的虚拟节点,,为了区分组件和元素,data.hook
function createComponent (vm,标签,,数据,,,,孩子,,男星),{//,才能组件的构造函数
如果才能(isObject(男星)){
,,,Ctor =, vm。美元options._base.extend(男星);,//,Vue.extend
,,}
data.hook 才能=,{,//等会渲染组件时,需要调用此初始化方法
,,,init (vnode) {
,,,,,let vm =, vnode.componentInstance =, new 男星({_isComponent:真});,//,new Sub 会用此选项和组件的配置进行合并
,,,,,vm。美元();山,//,组件挂载完成后,会在,vnode.componentInstance el 美元;
,,,}
,,}
return 才能;vnode (vm, vue-component - ${}标记,数据,键,定义,定义,{男星,孩子})
}
这篇文章将为大家详细讲解有关vue中是如何进行渲染,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
全局组件解析原理
为了保证组件的隔离,每个组件通过扩展方法产生一个新的类,去继承父类。并把用户通过Vue.component方法传入的选择合并到vue.options.components,再vue初始化时合并vue.options.components和vm。options.components美元。
1. Vue.component方法
2.。扩展方法
扩展方法就是产生一个继承于Vue的类,并且他身上应该有父类的所有功能。
3。属性合并
合并Vue。选项和Vue.component(定义)传入的定义
4。初始化合并
合并Vue.options.components和vm。美元options.components
好哒,到这里我们就实现了全局组件的解析。
下面我们再来康康组件如何渲染的吧?
组件的渲染原理
在创建虚拟节点时我们要通过isReservedTag判断当前这个标签是否是组件,普通标签的虚拟节点和组件的虚拟节点有所不同,如果标签是组件应该渲染一个组件的vnode。
1。创建组件虚拟节点
createComponent创建组件的虚拟节点,通过数据上有无钩来区分是否为组件
