Vue 源码深入解析之 扩展、event、 v-model 和 slot
一、扩展
- 前面分析了
Vue的核心以及编译过程，除此之外，Vue还提供了很多好用的feature， 如event、v-model、slot、keep-alive、transition等等。对他们的理解有助于我们在平时开发中更好地应用这些feature，即使出现bug我们也可以很从容地应对。
二、event 的理解
- 我们平时开发工作中，处理组件间的通讯，原生的交互，都离不开事件。对于一个组件元素，我们不仅仅可以绑定原生的
DOM事件，还可以绑定自定义事件，非常灵活和方便。那么接下来我们从源码角度来看看它的实现原理。为了更加直观，我们通过一个例子来分析它的实现：
let Child = {
template: ' +
'click me' +
'',
methods: {
clickHandler(e) {
console.log('Button clicked!', e)
this.$emit('select')
}
}
}
let vm = new Vue({
el: '#app',
template: '' +
'- 编译，先从编译阶段开始看起，在
parse阶段，会执行processAttrs方法，它的定义在src/compiler/parser/index.js中：
export const onRE = /^@|^v-on:/
export const dirRE = /^v-|^@|^:/
export const bindRE = /^:|^v-bind:/
function processAttrs (el) {
const list = el.attrsList
let i, l, name, rawName, value, modifiers, isProp
for (i = 0, l = list.length; i < l; i++) {
name = rawName = list[i].name
value = list[i].value
if (dirRE.test(name)) {
el.hasBindings = true
modifiers = parseModifiers(name)
if (modifiers) {
name = name.replace(modifierRE, '')
}
if (bindRE.test(name)) {
// ..
} else if (onRE.test(name)) {
name = name.replace(onRE, '')
addHandler(el, name, value, modifiers, false, warn)
} else {
// ...
}
} else {
// ...
}
}
}
function parseModifiers (name: string): Object | void {
const match = name.match(modifierRE)
if (match) {
const ret = {}
match.forEach(m => { ret[m.slice(1)] = true })
return ret
}
}
- 在对标签属性的处理过程中，判断如果是指令，首先通过
parseModifiers解析出修饰符，然后判断如果事件的指令，则执行addHandler(el, name, value, modifiers, false, warn)方法，它的定义在src/compiler/helpers.js中：
export function addHandler (
el: ASTElement,
name: string,
value: string,
modifiers: ?ASTModifiers,
important?: boolean,
warn?: Function
) {
modifiers = modifiers || emptyObject
// warn prevent and passive modifier
/* istanbul ignore if */
if (
process.env.NODE_ENV !== 'production' && warn &&
modifiers.prevent && modifiers.passive
) {
warn(
'passive and prevent can\'t be used together. ' +
'Passive handler can\'t prevent default event.'
)
}
// check capture modifier
if (modifiers.capture) {
delete modifiers.capture
name = '!' + name // mark the event as captured
}
if (modifiers.once) {
delete modifiers.once
name = '~' + name // mark the event as once
}
/* istanbul ignore if */
if (modifiers.passive) {
delete modifiers.passive
name = '&' + name // mark the event as passive
}
// normalize click.right and click.middle since they don't actually fire
// this is technically browser-specific, but at least for now browsers are
// the only target envs that have right/middle clicks.
if (name === 'click') {
if (modifiers.right) {
name = 'contextmenu'
delete modifiers.right
} else if (modifiers.middle) {
name = 'mouseup'
}
}
let events
if (modifiers.native) {
delete modifiers.native
events = el.nativeEvents || (el.nativeEvents = {})
} else {
events = el.events || (el.events = {})
}
const newHandler: any = {
value: value.trim()
}
if (modifiers !== emptyObject) {
newHandler.modifiers = modifiers
}
const handlers = events[name]
/* istanbul ignore if */
if (Array.isArray(handlers)) {
important ? handlers.unshift(newHandler) : handlers.push(newHandler)
} else if (handlers) {
events[name] = important ? [newHandler, handlers] : [handlers, newHandler]
} else {
events[name] = newHandler
}
el.plain = false
}
addHandler函数看起来长，实际上就做了三件事情，首先根据modifier修饰符对事件名name做处理，接着根据modifier.native判断是一个纯原生事件还是普通事件，分别对应el.nativeEvents和el.events，最后按照name对事件做归类，并把回调函数的字符串保留到对应的事件中。在我们的例子中，父组件的child节点生成的el.events和el.nativeEvents如下：
el.events = {
select: {
value: 'selectHandler'
}
}
el.nativeEvents = {
click: {
value: 'clickHandler',
modifiers: {
prevent: true
}
}
}
子组件的
button节点生成的el.events如下：
el.events = {
click: {
value: 'clickHandler($event)'
}
}
然后在
codegen的阶段，会在genData函数中根据 AST 元素节点上的events和nativeEvents生成data数据，它的定义在src/compiler/codegen/index.js中：
export function genData (el: ASTElement, state: CodegenState): string {
let data = '{'
// ...
if (el.events) {
data += `${genHandlers(el.events, false, state.warn)},`
}
if (el.nativeEvents) {
data += `${genHandlers(el.nativeEvents, true, state.warn)},`
}
// ...
return data
}
对于这两个属性，会调用
genHandlers函数，定义在src/compiler/codegen/events.js中：
export function genHandlers (
events: ASTElementHandlers,
isNative: boolean,
warn: Function
): string {
let res = isNative ? 'nativeOn:{' : 'on:{'
for (const name in events) {
res += `"${name}":${genHandler(name, events[name])},`
}
return res.slice(0, -1) + '}'
}
const fnExpRE = /^\s*([\w$_]+|\([^)]*?\))\s*=>|^function\s*\(/
const simplePathRE = /^\s*[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['.*?']|\[".*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*\s*$/
function genHandler (
name: string,
handler: ASTElementHandler | Array<ASTElementHandler>
): string {
if (!handler) {
return 'function(){}'
}
if (Array.isArray(handler)) {
return `[${handler.map(handler => genHandler(name, handler)).join(',')}]`
}
const isMethodPath = simplePathRE.test(handler.value)
const isFunctionExpression = fnExpRE.test(handler.value)
if (!handler.modifiers) {
if (isMethodPath || isFunctionExpression) {
return handler.value
}
/* istanbul ignore if */
if (__WEEX__ && handler.params) {
return genWeexHandler(handler.params, handler.value)
}
return `function($event){${handler.value}}` // inline statement
} else {
let code = ''
let genModifierCode = ''
const keys = []
for (const key in handler.modifiers) {
if (modifierCode[key]) {
genModifierCode += modifierCode[key]
// left/right
if (keyCodes[key]) {
keys.push(key)
}
} else if (key === 'exact') {
const modifiers: ASTModifiers = (handler.modifiers: any)
genModifierCode += genGuard(
['ctrl', 'shift', 'alt', 'meta']
.filter(keyModifier => !modifiers[keyModifier])
.map(keyModifier => `$event.${keyModifier}Key`)
.join('||')
)
} else {
keys.push(key)
}
}
if (keys.length) {
code += genKeyFilter(keys)
}
// Make sure modifiers like prevent and stop get executed after key filtering
if (genModifierCode) {
code += genModifierCode
}
const handlerCode = isMethodPath
? `return ${handler.value}($event)`
: isFunctionExpression
? `return (${handler.value})($event)`
: handler.value
/* istanbul ignore if */
if (__WEEX__ && handler.params) {
return genWeexHandler(handler.params, code + handlerCode)
}
return `function($event){${code}${handlerCode}}`
}
}
genHandlers方法遍历事件对象events，对同一个事件名称的事件调用genHandler(name, events[name])方法，它的内容看起来多，但实际上逻辑很简单，首先先判断如果handler是一个数组，就遍历它然后递归调用genHandler方法并拼接结果，然后判断hanlder.value是一个函数的调用路径还是一个函数表达式， 接着对modifiers做判断，对于没有modifiers的情况，就根据handler.value不同情况处理，要么直接返回，要么返回一个函数包裹的表达式；对于有modifiers的情况，则对各种不同的modifer情况做不同处理，添加相应的代码串。那么对于我们的例子而言，父组件生成的data串为：
{
on: {"select": selectHandler},
nativeOn: {"click": function($event) {
$event.preventDefault();
return clickHandler($event)
}
}
}
子组件生成的
data串为：
{
on: {"click": function($event) {
clickHandler($event)
}
}
}
其实 Vue 的事件有两种，一种是原生 DOM 事件，一种是用户自定义事件，我们分别来看。
DOM事件，之前在patch的时候执行各种module的钩子函数，只分析了DOM是如何渲染的，而DOM元素相关的属性、样式、事件等都是通过这些module的钩子函数完成设置的。所有和web相关的module都定义在src/platforms/web/runtime/modules目录下，我们这次只关注目录下的events.js即可。在patch过程中的创建阶段和更新阶段都会执行updateDOMListeners：
let target: any
function updateDOMListeners (oldVnode: VNodeWithData, vnode: VNodeWithData) {
if (isUndef(oldVnode.data.on) && isUndef(vnode.data.on)) {
return
}
const on = vnode.data.on || {}
const oldOn = oldVnode.data.on || {}
target = vnode.elm
normalizeEvents(on)
updateListeners(on, oldOn, add, remove, vnode.context)
target = undefined
}
- 首先获取
vnode.data.on，这就是我们之前的生成的data中对应的事件对象，target是当前vnode对于的DOM对象，normalizeEvents主要是对v-model相关的处理，我们之后分析v-model的时候会介绍，接着调用updateListeners(on, oldOn, add, remove, vnode.context)方法，它的定义在src/core/vdom/helpers/update-listeners.js中：
export function updateListeners (
on: Object,
oldOn: Object,
add: Function,
remove: Function,
vm: Component
) {
let name, def, cur, old, event
for (name in on) {
def = cur = on[name]
old = oldOn[name]
event = normalizeEvent(name)
/* istanbul ignore if */
if (__WEEX__ && isPlainObject(def)) {
cur = def.handler
event.params = def.params
}
if (isUndef(cur)) {
process.env.NODE_ENV !== 'production' && warn(
`Invalid handler for event "${event.name}": got ` + String(cur),
vm
)
} else if (isUndef(old)) {
if (isUndef(cur.fns)) {
cur = on[name] = createFnInvoker(cur)
}
add(event.name, cur, event.once, event.capture, event.passive, event.params)
} else if (cur !== old) {
old.fns = cur
on[name] = old
}
}
for (name in oldOn) {
if (isUndef(on[name])) {
event = normalizeEvent(name)
remove(event.name, oldOn[name], event.capture)
}
}
}
updateListeners的逻辑很简单，遍历on去添加事件监听，遍历oldOn去移除事件监听，关于监听和移除事件的方法都是外部传入的，因为它既处理原生DOM事件的添加删除，也处理自定义事件的添加删除。对于on的遍历，首先获得每一个事件名，然后做normalizeEvent的处理：
const normalizeEvent = cached((name: string): {
name: string,
once: boolean,
capture: boolean,
passive: boolean,
handler?: Function,
params?: Array<any>
} => {
const passive = name.charAt(0) === '&'
name = passive ? name.slice(1) : name
const once = name.charAt(0) === '~' // Prefixed last, checked first
name = once ? name.slice(1) : name
const capture = name.charAt(0) === '!'
name = capture ? name.slice(1) : name
return {
name,
once,
capture,
passive
}
})
- 根据我们的的事件名的一些特殊标识（之前在
addHandler的时候添加上的）区分出这个事件是否有once、capture、passive等修饰符。处理完事件名后，又对事件回调函数做处理，对于第一次，满足isUndef(old)并且isUndef(cur.fns)，会执行cur = on[name] = createFnInvoker(cur)方法去创建一个回调函数，然后在执行add(event.name, cur, event.once, event.capture, event.passive, event.params)完成一次事件绑定。我们先看一下createFnInvoker的实现：
export function createFnInvoker (fns: Function | Array<Function>): Function {
function invoker () {
const fns = invoker.fns
if (Array.isArray(fns)) {
const cloned = fns.slice()
for (let i = 0; i < cloned.length; i++) {
cloned[i].apply(null, arguments)
}
} else {
return fns.apply(null, arguments)
}
}
invoker.fns = fns
return invoker
}
-
这里定义了
invoker方法并返回，由于一个事件可能会对应多个回调函数，所以这里做了数组的判断，多个回调函数就依次调用。注意最后的赋值逻辑，invoker.fns = fns，每一次执行invoker函数都是从invoker.fns里取执行的回调函数，回到updateListeners，当我们第二次执行该函数的时候，判断如果cur !== old，那么只需要更改old.fns = cur把之前绑定的involer.fns赋值为新的回调函数即可，并且 通过on[name] = old保留引用关系，这样就保证了事件回调只添加一次，之后仅仅去修改它的回调函数的引用。updateListeners函数的最后遍历oldOn拿到事件名称，判断如果满足isUndef(on[name])，则执行remove(event.name, oldOn[name], event.capture)去移除事件回调。 -
了解了
updateListeners的实现后，我们来看一下在原生DOM事件中真正添加回调和移除回调函数的实现，它们的定义都在src/platforms/web/runtime/modules/event.js中：
function add (
event: string,
handler: Function,
once: boolean,
capture: boolean,
passive: boolean
) {
handler = withMacroTask(handler)
if (once) handler = createOnceHandler(handler, event, capture)
target.addEventListener(
event,
handler,
supportsPassive
? { capture, passive }
: capture
)
}
function remove (
event: string,
handler: Function,
capture: boolean,
_target?: HTMLElement
) {
(_target || target).removeEventListener(
event,
handler._withTask || handler,
capture
)
}
add和remove的逻辑很简单，就是实际上调用原生addEventListener和removeEventListener，并根据参数传递一些配置，注意这里的hanlder会用withMacroTask(hanlder)包裹一下，它的定义在src/core/util/next-tick.js中：
export function withMacroTask (fn: Function): Function {
return fn._withTask || (fn._withTask = function () {
useMacroTask = true
const res = fn.apply(null, arguments)
useMacroTask = false
return res
})
}
实际上就是强制在 DOM 事件的回调函数执行期间如果修改了数据，那么这些数据更改推入的队列会被当做
macroTask在nextTick后执行。
-
自定义事件，除了原生
DOM事件，Vue还支持了自定义事件，并且自定义事件只能作用在组件上，如果在组件上使用原生事件，需要加.native修饰符，普通元素上使用.native修饰符无效，接下来我们就来分析它的实现。 -
在
render阶段，如果是一个组件节点，则通过createComponent创建一个组件vnode，我们再来回顾这个方法，定义在src/core/vdom/create-component.js中：
export function createComponent (
Ctor: Class<Component> | Function | Object | void,
data: ?VNodeData,
context: Component,
children: ?Array<VNode>,
tag?: string
): VNode | Array<VNode> | void {
// ...
const listeners = data.on
data.on = data.nativeOn
// ...
const name = Ctor.options.name || tag
const vnode = new VNode(
`vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
data, undefined, undefined, undefined, context,
{ Ctor, propsData, listeners, tag, children },
asyncFactory
)
return vnode
}
- 我们只关注事件相关的逻辑，可以看到，它把
data.on赋值给了listeners，把data.nativeOn赋值给了data.on，这样所有的原生DOM事件处理跟我们刚才介绍的一样，它是在当前组件环境中处理的。而对于自定义事件，我们把listeners作为vnode的componentOptions传入，它是在子组件初始化阶段中处理的，所以它的处理环境是子组件。然后在子组件的初始化的时候，会执行initInternalComponent方法，它的定义在src/core/instance/init.js中：
export function initInternalComponent (vm: Component, options: InternalComponentOptions) {
const opts = vm.$options = Object.create(vm.constructor.options)
// ....
const vnodeComponentOptions = parentVnode.componentOptions
opts._parentListeners = vnodeComponentOptions.listeners
// ...
}
这里拿到了父组件传入的
listeners，然后在执行initEvents的过程中，会处理这个listeners，定义在src/core/instance/events.js中：
export function initEvents (vm: Component) {
vm._events = Object.create(null)
vm._hasHookEvent = false
// init parent attached events
const listeners = vm.$options._parentListeners
if (listeners) {
updateComponentListeners(vm, listeners)
}
}
拿到
listeners后，执行updateComponentListeners(vm, listeners)方法：
let target: any
export function updateComponentListeners (
vm: Component,
listeners: Object,
oldListeners: ?Object
) {
target = vm
updateListeners(listeners, oldListeners || {}, add, remove, vm)
target = undefined
}
updateListeners我们之前介绍过，所以对于自定义事件和原生DOM事件处理的差异就在事件添加和删除的实现上，来看一下自定义事件add和remove的实现：
function add (event, fn, once) {
if (once) {
target.$once(event, fn)
} else {
target.$on(event, fn)
}
}
function remove (event, fn) {
target.$off(event, fn)
}
实际上是利用 Vue 定义的事件中心，简单分析一下它的实现：
export function eventsMixin (Vue: Class<Component>) {
const hookRE = /^hook:/
Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component {
const vm: Component = this
if (Array.isArray(event)) {
for (let i = 0, l = event.length; i < l; i++) {
this.$on(event[i], fn)
}
} else {
(vm._events[event] || (vm._events[event] = [])).push(fn)
// optimize hook:event cost by using a boolean flag marked at registration
// instead of a hash lookup
if (hookRE.test(event)) {
vm._hasHookEvent = true
}
}
return vm
}
Vue.prototype.$once = function (event: string, fn: Function): Component {
const vm: Component = this
function on () {
vm.$off(event, on)
fn.apply(vm, arguments)
}
on.fn = fn
vm.$on(event, on)
return vm
}
Vue.prototype.$off = function (event?: string | Array<string>, fn?: Function): Component {
const vm: Component = this
// all
if (!arguments.length) {
vm._events = Object.create(null)
return vm
}
// array of events
if (Array.isArray(event)) {
for (let i = 0, l = event.length; i < l; i++) {
this.$off(event[i], fn)
}
return vm
}
// specific event
const cbs = vm._events[event]
if (!cbs) {
return vm
}
if (!fn) {
vm._events[event] = null
return vm
}
if (fn) {
// specific handler
let cb
let i = cbs.length
while (i--) {
cb = cbs[i]
if (cb === fn || cb.fn === fn) {
cbs.splice(i, 1)
break
}
}
}
return vm
}
Vue.prototype.$emit = function (event: string): Component {
const vm: Component = this
if (process.env.NODE_ENV !== 'production') {
const lowerCaseEvent = event.toLowerCase()
if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {
tip(
`Event "${lowerCaseEvent}" is emitted in component ` +
`${formatComponentName(vm)} but the handler is registered for "${event}". ` +
`Note that HTML attributes are case-insensitive and you cannot use ` +
`v-on to listen to camelCase events when using in-DOM templates. ` +
`You should probably use "${hyphenate(event)}" instead of "${event}".`
)
}
}
let cbs = vm._events[event]
if (cbs) {
cbs = cbs.length > 1 ? toArray(cbs) : cbs
const args = toArray(arguments, 1)
for (let i = 0, l = cbs.length; i < l; i++) {
try {
cbs[i].apply(vm, args)
} catch (e) {
handleError(e, vm, `event handler for "${event}"`)
}
}
}
return vm
}
}
-
非常经典的事件中心的实现，把所有的事件用
vm._events存储起来，当执行vm.$on(event,fn)的时候，按事件的名称event把回调函数fn存储起来vm._events[event].push(fn)。当执行vm.$emit(event)的时候，根据事件名event找到所有的回调函数let cbs = vm._events[event]，然后遍历执行所有的回调函数。当执行vm.$off(event,fn)的时候会移除指定事件名event和指定的fn当执行vm.$once(event,fn)的时候，内部就是执行vm.$on，并且当回调函数执行一次后再通过vm.$off移除事件的回调，这样就确保了回调函数只执行一次。 -
所以对于用户自定义的事件添加和删除就是利用了这几个事件中心的
API。需要注意的事一点，vm.$emit是给当前的vm上派发的实例，之所以我们常用它做父子组件通讯，是因为它的回调函数的定义是在父组件中，对于我们这个例子而言，当子组件的button被点击了，它通过this.$emit('select')派发事件，那么子组件的实例就监听到了这个select事件，并执行它的回调函数——定义在父组件中的selectHandler方法，这样就相当于完成了一次父子组件的通讯。 -
总结：对
Vue的事件实现有了进一步的了解，Vue支持两种事件类型，原生DOM事件和自定义事件，它们主要的区别在于添加和删除事件的方式不一样，并且自定义事件的派发是往当前实例上派发，但是可以利用在父组件环境定义回调函数来实现父子组件的通讯。另外要注意一点，只有组件节点才可以添加自定义事件，并且添加原生DOM事件需要使用native修饰符；而普通元素使用.native修饰符是没有作用的，也只能添加原生DOM事件。
三、v-model 的理解
-
Vue的数据响应原理理解为双向绑定，但实际上这是不准确的，我们之前提到的数据响应，都是通过数据的改变去驱动DOM视图的变化，而双向绑定除了数据驱动DOM外，DOM的变化反过来影响数据，是一个双向关系，在Vue中，我们可以通过v-model来实现双向绑定。v-model即可以作用在普通表单元素上，又可以作用在组件上，它其实是一个语法糖，接下来我们就来分析v-model的实现原理。 -
表单元素，结合示例来分析:
let vm = new Vue({
el: '#app',
template: ''
+ '' +
'Message is: {{ message }}
' +
'',
data() {
return {
message: ''
}
}
})
这是一个非常简单 demo，我们在
input元素上设置了v-model属性，绑定了message，当我们在input上输入了内容，message也会同步变化。接下来我们就来分析 Vue 是如何实现这一效果的，其实非常简单。
- 先从编译阶段分析，首先是
parse阶段，v-model被当做普通的指令解析到el.directives中，然后在codegen阶段，执行genData的时候，会执行const dirs = genDirectives(el, state)，它的定义在src/compiler/codegen/index.js中：
function genDirectives (el: ASTElement, state: CodegenState): string | void {
const dirs = el.directives
if (!dirs) return
let res = 'directives:['
let hasRuntime = false
let i, l, dir, needRuntime
for (i = 0, l = dirs.length; i < l; i++) {
dir = dirs[i]
needRuntime = true
const gen: DirectiveFunction = state.directives[dir.name]
if (gen) {
// compile-time directive that manipulates AST.
// returns true if it also needs a runtime counterpart.
needRuntime = !!gen(el, dir, state.warn)
}
if (needRuntime) {
hasRuntime = true
res += `{name:"${dir.name}",rawName:"${dir.rawName}"${
dir.value ? `,value:(${dir.value}),expression:${JSON.stringify(dir.value)}` : ''
}${
dir.arg ? `,arg:"${dir.arg}"` : ''
}${
dir.modifiers ? `,modifiers:${JSON.stringify(dir.modifiers)}` : ''
}},`
}
}
if (hasRuntime) {
return res.slice(0, -1) + ']'
}
}
genDrirectives方法就是遍历el.directives，然后获取每一个指令对应的方法const gen: DirectiveFunction = state.directives[dir.name]，这个指令方法实际上是在实例化CodegenState的时候通过option
传入的，这个option就是编译相关的配置，它在不同的平台下配置不同，在web环境下的定义在src/platforms/web/compiler/options.js下：
export const baseOptions: CompilerOptions = {
expectHTML: true,
modules,
directives,
isPreTag,
isUnaryTag,
mustUseProp,
canBeLeftOpenTag,
isReservedTag,
getTagNamespace,
staticKeys: genStaticKeys(modules)
}
directives定义在src/platforms/web/compiler/directives/index.js中：
export default {
model,
text,
html
}
- 那么对于
v-model而言，对应的directive函数是在src/platforms/web/compiler/directives/model.js中定义的model函数：
export default function model (
el: ASTElement,
dir: ASTDirective,
_warn: Function
): ?boolean {
warn = _warn
const value = dir.value
const modifiers = dir.modifiers
const tag = el.tag
const type = el.attrsMap.type
if (process.env.NODE_ENV !== 'production') {
// inputs with type="file" are read only and setting the input's
// value will throw an error.
if (tag === 'input' && type === 'file') {
warn(
`<${el.tag} v-model="${value}" type="file">:\n` +
`File inputs are read only. Use a v-on:change listener instead.`
)
}
}
if (el.component) {
genComponentModel(el, value, modifiers)
// component v-model doesn't need extra runtime
return false
} else if (tag === 'select') {
genSelect(el, value, modifiers)
} else if (tag === 'input' && type === 'checkbox') {
genCheckboxModel(el, value, modifiers)
} else if (tag === 'input' && type === 'radio') {
genRadioModel(el, value, modifiers)
} else if (tag === 'input' || tag === 'textarea') {
genDefaultModel(el, value, modifiers)
} else if (!config.isReservedTag(tag)) {
genComponentModel(el, value, modifiers)
// component v-model doesn't need extra runtime
return false
} else if (process.env.NODE_ENV !== 'production') {
warn(
`<${el.tag} v-model="${value}">: ` +
`v-model is not supported on this element type. ` +
'If you are working with contenteditable, it\'s recommended to ' +
'wrap a library dedicated for that purpose inside a custom component.'
)
}
// ensure runtime directive metadata
return true
}
- 我们执行
needRuntime = !!gen(el, dir, state.warn)就是在执行model函数，它会根据AST元素节点的不同情况去执行不同的逻辑，对于我们这个case而言，它会命中genDefaultModel(el, value, modifiers)的逻辑，稍后我们也会介绍组件的处理。我们来看一下genDefaultModel的实现：
function genDefaultModel (
el: ASTElement,
value: string,
modifiers: ?ASTModifiers
): ?boolean {
const type = el.attrsMap.type
// warn if v-bind:value conflicts with v-model
// except for inputs with v-bind:type
if (process.env.NODE_ENV !== 'production') {
const value = el.attrsMap['v-bind:value'] || el.attrsMap[':value']
const typeBinding = el.attrsMap['v-bind:type'] || el.attrsMap[':type']
if (value && !typeBinding) {
const binding = el.attrsMap['v-bind:value'] ? 'v-bind:value' : ':value'
warn(
`${binding}="${value}" conflicts with v-model on the same element ` +
'because the latter already expands to a value binding internally'
)
}
}
const { lazy, number, trim } = modifiers || {}
const needCompositionGuard = !lazy && type !== 'range'
const event = lazy
? 'change'
: type === 'range'
? RANGE_TOKEN
: 'input'
let valueExpression = '$event.target.value'
if (trim) {
valueExpression = `$event.target.value.trim()`
}
if (number) {
valueExpression = `_n(${valueExpression})`
}
let code = genAssignmentCode(value, valueExpression)
if (needCompositionGuard) {
code = `if($event.target.composing)return;${code}`
}
addProp(el, 'value', `(${value})`)
addHandler(el, event, code, null, true)
if (trim || number) {
addHandler(el, 'blur', '$forceUpdate()')
}
}
genDefaultModel函数先处理了modifiers，它的不同主要影响的是event和valueExpression的值，对于我们的例子，event为input，valueExpression为$event.target.value。然后去执行genAssignmentCode去生成代码，它的定义在src/compiler/directives/model.js中：
/**
* Cross-platform codegen helper for generating v-model value assignment code.
*/
export function genAssignmentCode (
value: string,
assignment: string
): string {
const res = parseModel(value)
if (res.key === null) {
return `${value}=${assignment}`
} else {
return `$set(${res.exp}, ${res.key}, ${assignment})`
}
}
-
该方法首先对
v-model对应的value做了解析，它处理了非常多的情况，对我们的例子，value就是messgae，所以返回的res.key为null，然后我们就得到${value}=${assignment}，也就是message=$event.target.value。然后我们又命中了needCompositionGuard为 true 的逻辑，所以最终的code为if($event.target.composing)return;message=$event.target.value。 -
code生成完后，又执行了两句非常关键的代码：
addProp(el, 'value', `(${value})`)
addHandler(el, event, code, null, true)
这实际上就是
input实现v-model的精髓，通过修改 AST 元素，给el添加一个prop，相当于我们在input上动态绑定了value，又给el添加了事件处理，相当于在input上绑定了input事件，其实转换成模板如下：
<input
v-bind:value="message"
v-on:input="message=$event.target.value">
- 其实就是动态绑定了
input的value指向了messgae变量，并且在触发input事件的时候去动态把message设置为目标值，这样实际上就完成了数据双向绑定了，所以说v-model实际上就是语法糖。再回到genDirectives，它接下来的逻辑就是根据指令生成一些data的代码：
if (needRuntime) {
hasRuntime = true
res += `{name:"${dir.name}",rawName:"${dir.rawName}"${
dir.value ? `,value:(${dir.value}),expression:${JSON.stringify(dir.value)}` : ''
}${
dir.arg ? `,arg:"${dir.arg}"` : ''
}${
dir.modifiers ? `,modifiers:${JSON.stringify(dir.modifiers)}` : ''
}},`
}
对我们的例子而言，最终生成的
render代码如下：
with(this) {
return _c('div',[_c('input',{
directives:[{
name:"model",
rawName:"v-model",
value:(message),
expression:"message"
}],
attrs:{"placeholder":"edit me"},
domProps:{"value":(message)},
on:{"input":function($event){
if($event.target.composing)
return;
message=$event.target.value
}}}),_c('p',[_v("Message is: "+_s(message))])
])
}
-
关于事件的处理之前已经分析过了，所以对于
input的v-model而言，完全就是语法糖，并且对于其它表单元素套路都是一样，区别在于生成的事件代码会略有不同。v-model除了作用在表单元素上，新版的Vue还把这一语法糖用在了组件上，接下来我们来分析它的实现。 -
组件，为了更加直观，我们也是通过一个例子分析：
let Child = {
template: ''
+ '' +
'',
props: ['value'],
methods: {
updateValue(e) {
this.$emit('input', e.target.value)
}
}
}
let vm = new Vue({
el: '#app',
template: '' +
'Message is: {{ message }}
' +
'',
data() {
return {
message: ''
}
},
components: {
Child
}
})
-
可以看到，父组件引用
child子组件的地方使用了v-model关联了数据message；而子组件定义了一个value的prop，并且在input事件的回调函数中，通过this.$emit('input', e.target.value)派发了一个事件，为了让v-model生效，这两点是必须的。 -
接着我们从源码角度分析实现原理，还是从编译阶段说起，对于父组件而言，在编译阶段会解析
v-modle指令，依然会执行genData函数中的genDirectives函数，接着执行src/platforms/web/compiler/directives/model.js中定义的model函数，并命中如下逻辑：
else if (!config.isReservedTag(tag)) {
genComponentModel(el, value, modifiers);
return false
}
genComponentModel函数定义在src/compiler/directives/model.js中：
export function genComponentModel (
el: ASTElement,
value: string,
modifiers: ?ASTModifiers
): ?boolean {
const { number, trim } = modifiers || {}
const baseValueExpression = '$$v'
let valueExpression = baseValueExpression
if (trim) {
valueExpression =
`(typeof ${baseValueExpression} === 'string'` +
`? ${baseValueExpression}.trim()` +
`: ${baseValueExpression})`
}
if (number) {
valueExpression = `_n(${valueExpression})`
}
const assignment = genAssignmentCode(value, valueExpression)
el.model = {
value: `(${value})`,
expression: `"${value}"`,
callback: `function (${baseValueExpression}) {${assignment}}`
}
}
genComponentModel的逻辑很简单，对我们的例子而言，生成的el.model的值为：
el.model = {
callback:'function ($$v) {message=$$v}',
expression:'"message"',
value:'(message)'
}
那么在
genDirectives之后，genData函数中有一段逻辑如下：
if (el.model) {
data += `model:{value:${
el.model.value
},callback:${
el.model.callback
},expression:${
el.model.expression
}},`
}
那么父组件最终生成的
render代码如下：
with(this){
return _c('div',[_c('child',{
model:{
value:(message),
callback:function ($$v) {
message=$$v
},
expression:"message"
}
}),
_c('p',[_v("Message is: "+_s(message))])],1)
}
然后在创建子组件
vnode阶段，会执行createComponent函数，它的定义在src/core/vdom/create-component.js中：
export function createComponent (
Ctor: Class<Component> | Function | Object | void,
data: ?VNodeData,
context: Component,
children: ?Array<VNode>,
tag?: string
): VNode | Array<VNode> | void {
// ...
// transform component v-model data into props & events
if (isDef(data.model)) {
transformModel(Ctor.options, data)
}
// extract props
const propsData = extractPropsFromVNodeData(data, Ctor, tag)
// ...
// extract listeners, since these needs to be treated as
// child component listeners instead of DOM listeners
const listeners = data.on
// ...
const vnode = new VNode(
`vue-component-${Ctor.cid}${name ? `-${name}` : ''}`,
data, undefined, undefined, undefined, context,
{ Ctor, propsData, listeners, tag, children },
asyncFactory
)
return vnode
}
其中会对
data.model的情况做处理，执行transformModel(Ctor.options, data)方法：
// transform component v-model info (value and callback) into
// prop and event handler respectively.
function transformModel (options, data: any) {
const prop = (options.model && options.model.prop) || 'value'
const event = (options.model && options.model.event) || 'input'
;(data.props || (data.props = {}))[prop] = data.model.value
const on = data.on || (data.on = {})
if (isDef(on[event])) {
on[event] = [data.model.callback].concat(on[event])
} else {
on[event] = data.model.callback
}
}
transformModel逻辑很简单，给data.props添加data.model.value，并且给data.on添加data.model.callback，对我们的例子而言，扩展结果如下：
data.props = {
value: (message),
}
data.on = {
input: function ($$v) {
message=$$v
}
}
其实就相当于我们在这样编写父组件：
let vm = new Vue({
el: '#app',
template: '' +
'Message is: {{ message }}
' +
'',
data() {
return {
message: ''
}
},
components: {
Child
}
})
-
子组件传递的
value绑定到当前父组件的message，同时监听自定义input事件，当子组件派发input事件的时候，父组件会在事件回调函数中修改message的值，同时value也会发生变化，子组件的input值被更新。 -
这就是典型的
Vue的父子组件通讯模式，父组件通过prop把数据传递到子组件，子组件修改了数据后把改变通过$emit事件的方式通知父组件，所以说组件上的v-model也是一种语法糖。另外我们注意到组件v-model的实现，子组件的value prop以及派发的input事件名是可配的，可以看到transformModel中对这部分的处理：
function transformModel (options, data: any) {
const prop = (options.model && options.model.prop) || 'value'
const event = (options.model && options.model.event) || 'input'
// ...
}
也就是说可以在定义子组件的时候通过
model选项配置子组件接收的prop名以及派发的事件名，举个例子：
let Child = {
template: ''
+ '' +
'',
props: ['msg'],
model: {
prop: 'msg',
event: 'change'
},
methods: {
updateValue(e) {
this.$emit('change', e.target.value)
}
}
}
let vm = new Vue({
el: '#app',
template: '' +
'Message is: {{ message }}
' +
'',
data() {
return {
message: ''
}
},
components: {
Child
}
})
子组件修改了接收的
prop名以及派发的事件名，然而这一切父组件作为调用方是不用关心的，这样做的好处是我们可以把value这个prop作为其它的用途。
- 总结：
v-model的实现就分析完了，我们了解到它是Vue双向绑定的真正实现，但本质上就是一种语法糖，它即可以支持原生表单元素，也可以支持自定义组件。在组件的实现中，我们是可以配置子组件接收的prop名称，以及派发的事件名称。
四、slot 的理解
-
Vue的组件提供了一个非常有用的特性 ——slot插槽，它让组件的实现变的更加灵活。我们平时在开发组件库的时候，为了让组件更加灵活可定制，经常用插槽的方式让用户可以自定义内容。插槽分为普通插槽和作用域插槽，它们可以解决不同的场景，但它是怎么实现的呢，下面我们就从源码的角度来分析插槽的实现原理。 -
普通插槽，为了更加直观，我们还是通过一个例子来分析插槽的实现：
let AppLayout = {
template: '' +
'默认内容 ' +
'{{title}}
' +
'{{msg}}
' +
'{{desc}}
' +
'' +
'',
data() {
return {
title: '我是标题',
msg: '我是内容',
desc: '其它信息'
}
},
components: {
AppLayout
}
})
- 这里我们定义了
AppLayout子组件，它内部定义了三个插槽，两个为具名插槽，一个name为header，一个name为footer，还有一个没有定义name的是默认插槽。之前填写的内容为默认内容。我们的父组件注册和引用了AppLayout的组件，并在组件内部定义了一些元素，用来替换插槽，那么它最终生成的DOM如下：
<div>
<div class="container">
<header><h1>我是标题h1>header>
<main><p>我是内容p>main>
<footer><p>其它信息p>footer>
div>
div>
- 编译，我们知道编译是发生在调用
vm.$mount的时候，所以编译的顺序是先编译父组件，再编译子组件。首先编译父组件，在parse阶段，会执行processSlot处理slot，它的定义在src/compiler/parser/index.js中：
function processSlot (el) {
if (el.tag === 'slot') {
el.slotName = getBindingAttr(el, 'name')
if (process.env.NODE_ENV !== 'production' && el.key) {
warn(
`\`key\` does not work on because slots are abstract outlets ` +
`and can possibly expand into multiple elements. ` +
`Use the key on a wrapping element instead.`
)
}
} else {
let slotScope
if (el.tag === 'template') {
slotScope = getAndRemoveAttr(el, 'scope')
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && slotScope) {
warn(
`the "scope" attribute for scoped slots have been deprecated and ` +
`replaced by "slot-scope" since 2.5. The new "slot-scope" attribute ` +
`can also be used on plain elements in addition to to ` +
`denote scoped slots.`,
true
)
}
el.slotScope = slotScope || getAndRemoveAttr(el, 'slot-scope')
} else if ((slotScope = getAndRemoveAttr(el, 'slot-scope'))) {
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && el.attrsMap['v-for']) {
warn(
`Ambiguous combined usage of slot-scope and v-for on <${el.tag}> ` +
`(v-for takes higher priority). Use a wrapper for the ` +
`scoped slot to make it clearer.`,
true
)
}
el.slotScope = slotScope
}
const slotTarget = getBindingAttr(el, 'slot')
if (slotTarget) {
el.slotTarget = slotTarget === '""' ? '"default"' : slotTarget
// preserve slot as an attribute for native shadow DOM compat
// only for non-scoped slots.
if (el.tag !== 'template' && !el.slotScope) {
addAttr(el, 'slot', slotTarget)
}
}
}
}
- 当解析到标签上有
slot属性的时候，会给对应的AST
元素节点添加slotTarget属性，然后在codegen阶段，在genData中会处理slotTarget，相关代码在src/compiler/codegen/index.js中：
if (el.slotTarget && !el.slotScope) {
data += `slot:${el.slotTarget},`
}
会给
data添加一个slot属性，并指向slotTarget，之后会用到。在我们的例子中，父组件最终生成的代码如下：
with(this){
return _c('div',
[_c('app-layout',
[_c('h1',{attrs:{"slot":"header"},slot:"header"},
[_v(_s(title))]),
_c('p',[_v(_s(msg))]),
_c('p',{attrs:{"slot":"footer"},slot:"footer"},
[_v(_s(desc))]
)
])
],
1)}
接下来编译子组件，同样在
parser阶段会执行processSlot处理函数，它的定义在src/compiler/parser/index.js中：
function processSlot (el) {
if (el.tag === 'slot') {
el.slotName = getBindingAttr(el, 'name')
}
// ...
}
- 当遇到
slot标签的时候会给对应的AST元素节点添加slotName属性，然后在codegen阶段，会判断如果当前AST元素节点是slot标签，则执行genSlot函数，它的定义在src/compiler/codegen/index.js中：
function genSlot (el: ASTElement, state: CodegenState): string {
const slotName = el.slotName || '"default"'
const children = genChildren(el, state)
let res = `_t(${slotName}${children ? `,${children}` : ''}`
const attrs = el.attrs && `{${el.attrs.map(a => `${camelize(a.name)}:${a.value}`).join(',')}}`
const bind = el.attrsMap['v-bind']
if ((attrs || bind) && !children) {
res += `,null`
}
if (attrs) {
res += `,${attrs}`
}
if (bind) {
res += `${attrs ? '' : ',null'},${bind}`
}
return res + ')'
}
我们先不考虑
slot标签上有attrs以及v-bind的情况，那么它生成的代码实际上就只有：
const slotName = el.slotName || '"default"'
const children = genChildren(el, state)
let res = `_t(${slotName}${children ? `,${children}` : ''}`
- 这里的
slotName从AST元素节点对应的属性上取，默认是default，而children对应的就是slot开始和闭合标签包裹的内容。来看一下我们例子的子组件最终生成的代码，如下：
with(this) {
return _c('div',{
staticClass:"container"
},[
_c('header',[_t("header")],2),
_c('main',[_t("default",[_v("默认内容")])],2),
_c('footer',[_t("footer")],2)
]
)
}
在编译章节我们了解到，
_t函数对应的就是renderSlot方法，它的定义在src/core/instance/render-heplpers/render-slot.js中：
/**
* Runtime helper for rendering
*/
export function renderSlot (
name: string,
fallback: ?Array<VNode>,
props: ?Object,
bindObject: ?Object
): ?Array<VNode> {
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)
}
nodes = scopedSlotFn(props) || fallback
} else {
const slotNodes = this.$slots[name]
// warn duplicate slot usage
if (slotNodes) {
if (process.env.NODE_ENV !== 'production' && slotNodes._rendered) {
warn(
`Duplicate presence of slot "${name}" found in the same render tree ` +
`- this will likely cause render errors.`,
this
)
}
slotNodes._rendered = true
}
nodes = slotNodes || fallback
}
const target = props && props.slot
if (target) {
return this.$createElement('template', { slot: target }, nodes)
} else {
return nodes
}
}
render-slot的参数name代表插槽名称slotName，fallback代表插槽的默认内容生成的vnode数组。先忽略scoped-slot，只看默认插槽逻辑。如果this.$slot[name]有值，就返回它对应的vnode数组，否则返回fallback。那么这个this.$slot是哪里来的呢？我们知道子组件的init时机是在父组件执行patch过程的时候，那这个时候父组件已经编译完成了。并且子组件在init过程中会执行initRender函数，initRender的时候获取到vm.$slot，相关代码在src/core/instance/render.js中：
export function initRender (vm: Component) {
// ...
const parentVnode = vm.$vnode = options._parentVnode // the placeholder node in parent tree
const renderContext = parentVnode && parentVnode.context
vm.$slots = resolveSlots(options._renderChildren, renderContext)
}
vm.$slots是通过执行resolveSlots(options._renderChildren, renderContext)返回的，它的定义在src/core/instance/render-helpers/resolve-slots.js中：
/**
* Runtime helper for resolving raw children VNodes into a slot object.
*/
export function resolveSlots (
children: ?Array<VNode>,
context: ?Component
): { [key: string]: Array<VNode> } {
const slots = {}
if (!children) {
return slots
}
for (let i = 0, l = children.length; i < l; i++) {
const child = children[i]
const data = child.data
// remove slot attribute if the node is resolved as a Vue slot node
if (data && data.attrs && data.attrs.slot) {
delete data.attrs.slot
}
// named slots should only be respected if the vnode was rendered in the
// same context.
if ((child.context === context || child.fnContext === context) &&
data && data.slot != null
) {
const name = data.slot
const slot = (slots[name] || (slots[name] = []))
if (child.tag === 'template') {
slot.push.apply(slot, child.children || [])
} else {
slot.push(child)
}
} else {
(slots.default || (slots.default = [])).push(child)
}
}
// ignore slots that contains only whitespace
for (const name in slots) {
if (slots[name].every(isWhitespace)) {
delete slots[name]
}
}
return slots
}
-
resolveSlots方法接收 2 个参数，第一个参数chilren对应的是父vnode的children，在我们的例子中就是包裹的内容。第二个参数context是父vnode的上下文，也就是父组件的vm实例。 -
resolveSlots函数的逻辑就是遍历chilren，拿到每一个child的data，然后通过data.slot获取到插槽名称，这个slot就是我们之前编译父组件在codegen阶段设置的data.slot。接着以插槽名称为key把child添加到slots中，如果data.slot不存在，则是默认插槽的内容，则把对应的child添加到slots.defaults中。这样就获取到整个slots，它是一个对象，key是插槽名称，value是一个vnode类型的数组，因为它可以有多个同名插槽。 -
这样我们就拿到了
vm.$slots了，回到renderSlot函数，const slotNodes = this.$slots[name]，我们也就能根据插槽名称获取到对应的vnode数组了，这个数组里的vnode都是在父组件创建的，这样就实现了在父组替换子组件插槽的内容了。对应的slot渲染成vnodes，作为当前组件渲染vnode的children。我们知道在普通插槽中，父组件应用到子组件插槽里的数据都是绑定到父组件的，因为它渲染成vnode的时机的上下文是父组件的实例。但是在一些实际开发中，我们想通过子组件的一些数据来决定父组件实现插槽的逻辑，Vue提供了另一种插槽——作用域插槽，接下来我们就来分析一下它的实现原理。 -
作用域插槽，为了更加直观，我们也是通过一个例子来分析作用域插槽的实现：
let Child = {
template: '' +
'' +
'' +
'Hello from parent
' +
'{{ props.text + props.msg}}
' +
'' +
'' +
'',
components: {
Child
}
})
最终生成的 DOM 结构如下：
<div>
<div class="child">
<p>Hello from parentp>
<p>Hello Vuep>
div>
div>
- 我们可以看到子组件的
slot标签多了text属性，以及:msg属性。父组件实现插槽的部分多了一个template标签，以及scope-slot属性，其实在Vue 2.5+版本，scoped-slot可以作用在普通元素上。这些就是作用域插槽和普通插槽在写法上的差别。在编译阶段，仍然是先编译父组件，同样是通过processSlot函数去处理scoped-slot，它的定义在在src/compiler/parser/index.js中：
function processSlot (el) {
// ...
let slotScope
if (el.tag === 'template') {
slotScope = getAndRemoveAttr(el, 'scope')
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && slotScope) {
warn(
`the "scope" attribute for scoped slots have been deprecated and ` +
`replaced by "slot-scope" since 2.5. The new "slot-scope" attribute ` +
`can also be used on plain elements in addition to to ` +
`denote scoped slots.`,
true
)
}
el.slotScope = slotScope || getAndRemoveAttr(el, 'slot-scope')
} else if ((slotScope = getAndRemoveAttr(el, 'slot-scope'))) {
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && el.attrsMap['v-for']) {
warn(
`Ambiguous combined usage of slot-scope and v-for on <${el.tag}> ` +
`(v-for takes higher priority). Use a wrapper for the ` +
`scoped slot to make it clearer.`,
true
)
}
el.slotScope = slotScope
}
// ...
}
这块逻辑很简单，读取
scoped-slot属性并赋值给当前 AST 元素节点的slotScope属性，接下来在构造 AST 树的时候，会执行以下逻辑：
if (element.elseif || element.else) {
processIfConditions(element, currentParent)
} else if (element.slotScope) {
currentParent.plain = false
const name = element.slotTarget || '"default"'
;(currentParent.scopedSlots || (currentParent.scopedSlots = {}))[name] = element
} else {
currentParent.children.push(element)
element.parent = currentParent
}
- 可以看到对于拥有
scopedSlot属性的AST元素节点而言，是不会作为children添加到当前AST树中，而是存到父AST元素节点的scopedSlots属性上，它是一个对象，以插槽名称name为key。然后在genData的过程，会对scopedSlots做处理：
if (el.scopedSlots) {
data += `${genScopedSlots(el.scopedSlots, state)},`
}
function genScopedSlots (
slots: { [key: string]: ASTElement },
state: CodegenState
): string {
return `scopedSlots:_u([${
Object.keys(slots).map(key => {
return genScopedSlot(key, slots[key], state)
}).join(',')
}])`
}
function genScopedSlot (
key: string,
el: ASTElement,
state: CodegenState
): string {
if (el.for && !el.forProcessed) {
return genForScopedSlot(key, el, state)
}
const fn = `function(${String(el.slotScope)}){` +
`return ${el.tag === 'template'
? el.if
? `${el.if}?${genChildren(el, state) || 'undefined'}:undefined`
: genChildren(el, state) || 'undefined'
: genElement(el, state)
}}`
return `{key:${key},fn:${fn}}`
}
genScopedSlots就是对scopedSlots对象遍历，执行genScopedSlot，并把结果用逗号拼接，而genScopedSlot是先生成一段函数代码，并且函数的参数就是我们的slotScope，也就是写在标签属性上的scoped-slot对应的值，然后再返回一个对象，key为插槽名称，fn为生成的函数代码。对于我们这个例子而言，父组件最终生成的代码如下：
with(this){
return _c('div',
[_c('child',
{scopedSlots:_u([
{
key: "default",
fn: function(props) {
return [
_c('p',[_v("Hello from parent")]),
_c('p',[_v(_s(props.text + props.msg))])
]
}
}])
}
)],
1)
}
- 可以看到它和普通插槽父组件编译结果的一个很明显的区别就是没有
children了，data部分多了一个对象，并且执行了_u方法，在编译章节我们了解到，_u函数对的就是resolveScopedSlots方法，它的定义在src/core/instance/render-heplpers/resolve-slots.js中：
export function resolveScopedSlots (
fns: ScopedSlotsData, // see flow/vnode
res?: Object
): { [key: string]: Function } {
res = res || {}
for (let i = 0; i < fns.length; i++) {
if (Array.isArray(fns[i])) {
resolveScopedSlots(fns[i], res)
} else {
res[fns[i].key] = fns[i].fn
}
}
return res
}
- 其中，
fns是一个数组，每一个数组元素都有一个key和一个fn，key对应的是插槽的名称，fn对应一个函数。整个逻辑就是遍历这个fns数组，生成一个对象，对象的key就是插槽名称，value就是函数。这个函数的执行时机稍后我们会介绍。接着我们再来看一下子组件的编译，和普通插槽的过程基本相同，唯一一点区别是在genSlot的时候：
function genSlot (el: ASTElement, state: CodegenState): string {
const slotName = el.slotName || '"default"'
const children = genChildren(el, state)
let res = `_t(${slotName}${children ? `,${children}` : ''}`
const attrs = el.attrs && `{${el.attrs.map(a => `${camelize(a.name)}:${a.value}`).join(',')}}`
const bind = el.attrsMap['v-bind']
if ((attrs || bind) && !children) {
res += `,null`
}
if (attrs) {
res += `,${attrs}`
}
if (bind) {
res += `${attrs ? '' : ',null'},${bind}`
}
return res + ')'
}
它会对
attrs和v-bind做处理，对应到我们的例子，最终生成的代码如下：
with(this){
return _c('div',
{staticClass:"child"},
[_t("default",null,
{text:"Hello ",msg:msg}
)],
2)}
_t方法我们之前介绍过，对应的是renderSlot方法：
export function renderSlot (
name: string,
fallback: ?Array<VNode>,
props: ?Object,
bindObject: ?Object
): ?Array<VNode> {
const scopedSlotFn = this.$scopedSlots[name]
let nodes
if (scopedSlotFn) {
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)
}
nodes = scopedSlotFn(props) || fallback
} else {
// ...
}
const target = props && props.slot
if (target) {
return this.$createElement('template', { slot: target }, nodes)
} else {
return nodes
}
}
- 我们只关注作用域插槽的逻辑，那么这个
this.$scopedSlots又是在什么地方定义的呢，原来在子组件的渲染函数执行前，在vm_render方法内，有这么一段逻辑，定义在src/core/instance/render.js中：
if (_parentVnode) {
vm.$scopedSlots = _parentVnode.data.scopedSlots || emptyObject
}
-
这个
_parentVNode.data.scopedSlots对应的就是我们在父组件通过执行resolveScopedSlots返回的对象。所以回到genSlot函数，我们就可以通过插槽的名称拿到对应的scopedSlotFn，然后把相关的数据扩展到props上，作为函数的参数传入，原来之前我们提到的函数这个时候执行，然后返回生成的vnodes，为后续渲染节点用。 -
总结：了解了普通插槽和作用域插槽的实现，它们有一个很大的差别是数据作用域，普通插槽是在父组件编译和渲染阶段生成
vnodes，所以数据的作用域是父组件实例，子组件渲染的时候直接拿到这些渲染好的vnodes。而对于作用域插槽，父组件在编译和渲染阶段并不会直接生成vnodes，而是在父节点vnode的data中保留一个scopedSlots对象，存储着不同名称的插槽以及它们对应的渲染函数，只有在编译和渲染子组件阶段才会执行这个渲染函数生成vnodes，由于是在子组件环境执行的，所以对应的数据作用域是子组件实例。简单地说，两种插槽的目的都是让子组件slot占位符生成的内容由父组件来决定，但数据的作用域会根据它们vnodes渲染时机不同而不同。