Vue插槽实现原理实例分析
本篇内容介绍了“Vue插槽实现原理实例分析”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
吉隆网站建设公司成都创新互联,吉隆网站设计制作，有大型网站制作公司丰富经验。已为吉隆1000+提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱，请找那个售后服务好的吉隆做网站的公司定做！
一、样例代码
这是默认插槽
这是具名插槽
这是作用域插槽（老版）{{scope.test}}
这是作用域插槽（新版）{{scopeProps.test}}
二、透过现象看本质
插槽的作用是实现内容分发，实现内容分发，需要两个条件：
组件内部定义的slot标签，我们可以理解为占位符，父组件中插槽内容，就是要分发的内容。插槽处理本质就是将指定内容放到指定位置。废话不多说，从本篇文章中，将能了解到：
三、实现原理
vue组件实例化顺序为：父组件状态初始化(data、computed、watch...) --> 模板编译 --> 生成render方法 --> 实例化渲染watcher --> 调用render方法，生成VNode --> patch VNode，转换为真实DOM --> 实例化子组件 --> ......重复相同的流程 --> 子组件生成的真实DOM挂载到父组件生成的真实DOM上，挂载到页面中 --> 移除旧节点
从上述流程中，可以推测出：
1.父组件模板解析在子组件之前，所以父组件首先会获取到插槽模板内容
2.子组件模板解析在后，所以在子组件调用render方法生成VNode时，可以借助部分手段，拿到插槽的VNode节点
3.作用域插槽可以获取子组件内变量，因此作用域插槽的VNode生成，是动态的，即需要实时传入子组件的作用域scope
整个插槽的处理阶段大致分为三步：
以下面代码为例，简要概述插槽运转的过程。
123
四、父组件编译阶段
编译是将模板文件解析成AST语法树，会将插槽template解析成如下数据结构：
{
tag: 'test',
scopedSlots: { // 作用域插槽
// slotName: ASTNode,
// ...
}
children: [
{
tag: 'template',
// ...
parent: parentASTNode,
children: [ childASTNode ], // 插槽内容子节点，即文本节点123
slotScope: undefined, // 作用域插槽绑定值
slotTarget: "\"hello\"", // 具名插槽名称
slotTargetDynamic: false // 是否是动态绑定插槽
// ...
}
]
}五、父组件生成渲染方法
根据AST语法树，解析生成渲染方法字符串，最终父组件生成的结果如下所示，这个结构和我们直接写render方法一致，本质都是生成VNode, 只不过_c或h是this.$createElement的缩写。
with(this){
return _c('div',{attrs:{"id":"app"}},
[_c('test',
[
_c('template',{slot:"hello"},[_v("\n 123\n ")])],2)
],
1)
}六、父组件生成VNode
调用render方法，生成VNode,VNode具体格式如下：
{
tag: 'div',
parent: undefined,
data: { // 存储VNode配置项
attrs: { id: '#app' }
},
context: componentContext, // 组件作用域
elm: undefined, // 真实DOM元素
children: [
{
tag: 'vue-component-1-test',
children: undefined, // 组件为页面最小组成单元，插槽内容放放到子组件中解析
parent: undefined,
componentOptions: { // 组件配置项
Ctor: VueComponentCtor, // 组件构造方法
data: {
hook: {
init: fn, // 实例化组件调用方法
insert: fn,
prepatch: fn,
destroy: fn
},
scopedSlots: { // 作用域插槽配置项，用于生成作用域插槽VNode
slotName: slotFn
}
},
children: [ // 组件插槽节点
tag: 'template',
propsData: undefined, // props参数
listeners: undefined,
data: {
slot: 'hello'
},
children: [ VNode ],
parent: undefined,
context: componentContext // 父组件作用域
// ...
]
}
}
],
// ...
}在vue中，组件是页面结构的基本单元，从上述的VNode中，我们也可以看出，VNode页面层级结构结束于test组件，test组件children处理会在子组件初始化过程中处理。子组件构造方法组装与属性合并在vue-dev\src\core\vdom\create-component.js createComponent方法中，组件实例化调用入口是在vue-dev\src\core\vdom\patch.js createComponent方法中。
七、子组件状态初始化
实例化子组件时，会在initRender -> resolveSlots方法中，将子组件插槽节点挂载到组件作用域vm中，挂载形式为vm.$slots = {slotName: [VNode]}形式。
八、子组件编译阶段
子组件在编译阶段，会将slot节点，编译成以下AST结构：
{
tag: 'h2',
parent: undefined,
children: [
{
tag: 'slot',
slotName: "\"hello\"",
// ...
}
],
// ...
}九、子组件生成渲染方法
生成的渲染方法如下，其中_t为renderSlot方法的简写，从renderSlot方法，我们就可以直观的将插槽内容与插槽点联系在一起。
// 渲染方法
with(this){
return _c('h2',[ _t("hello") ], 2)
}// 源码路径：vue-dev\src\core\instance\render-helpers\render-slot.js
export function renderSlot (
name: string,
fallback: ?Array,
props: ?Object,
bindObject: ?Object
): ?Array {
const scopedSlotFn = this.$scopedSlots[name]
let nodes
if (scopedSlotFn) { // scoped slot
props = props || {}
if (bindObject) {
if (process.env.NODE_ENV !== 'production' && !isObject(bindObject)) {
warn(
'slot v-bind without argument expects an Object',
this
)
}
props = extend(extend({}, bindObject), props)
}
// 作用域插槽，获取插槽VNode
nodes = scopedSlotFn(props) || fallback
} else {
// 获取插槽普通插槽VNode
nodes = this.$slots[name] || fallback
}
const target = props && props.slot
if (target) {
return this.$createElement('template', { slot: target }, nodes)
} else {
return nodes
}
}
作用域插槽与具名插槽区别
{{scope.hello}}
