Vue源码分析
2023-04-12 09:17:18 0 举报AI智能生成
Vue源码分析
作者其他创作
大纲/内容
Vue
util
warn
extend
mergeOptions
defineReactive
set
delete
observable
options
directives
components
KeepAlive
filters
_base:Vue
use
mixin
extend
directive
component
filter
super
superOptions
extendOptions
sealedOptions
Vue.property
$isServer
$ssrContext
version
_init
$data
return this._data
$props
return this._props
$set
$delete
$watch
$on
$once
$off
$emit
_update
$forceUpdate
$destroy
$nextTick
_render
vm
_uid
_isVue
$options
经过编译添加render
_self
$parent
$children
$root
$refs
_watcher
_inactive
_directInactive
_isMounted
_isDestroyed
_isBeingDestroyed
_events
_vnode
$slots
$scopedSlots
_c
$createElement
$attrs
$listeners
_props
_data
_computedWatchers
_watcher
_watchers
_provided
$node
Watcher
vm
deep
user
lazy
sync
before
cb
dirty
deps
newDeps
depIds
newDepIds
Vnode
Dep
$mount
先找render
再找template
template是html的模版
template写的是#id
template写的是获取好的某个节点：document.querySelector
最后才找el
给options添加render
const {render, staticRenderFns} = <font color="#b71c1c">compileToFunctions</font>(template,options)
const {compile, <font color="#b71c1c">compileToFunctions</font>}=<font color="#b71c1c" style="">createCompiler</font>(baseOptions)
<font face="黑体" style="" color="#b71c1c">createCompiler</font> = <font color="#b71c1c">createCompilerCreator</font>(<font color="#000000">function baseCompile(template,options){}</font>)
function <font color="#b71c1c">createCompilerCreator</font>(<font color="#000000">baseCompile</font>){<br> return function <font color="#b71c1c">createCompiler</font>(baseOptions){<br> function <font color="#000000">compile</font>(template,options){<br> <font color="#000000">// 合并options</font><br> const finalOptions = Object.create(baseOptions)<br> finalOptions.modules = baseOptions.modules.concat(options.modules)<br> finalOptions.directives = extend(Object.create(baseOptions.directives, options.directives))<br> for(const key in options){<br> key !== 'modules' && key !== "directives" && (finalOptions[key]=options[key])<br> }<br> const compiled = <font color="#000000">baseCompile</font>(template.trim(),finalOptions)<br> }<br> return {<font color="#000000">compile</font>, <font color="#000000">compileToFunctions</font>: <font color="#000000">createCompileToFunctionFn</font>(<font color="#000000">compile</font>)}<br> }<br>}<br>
function <font color="#000000">createCompileToFunctionFn</font>(<font color="#b71c1c">compile</font>){<br> return function <font color="#000000">compileToFunctions</font>(template,options,vm){<br> const compiled = <font color="#000000" style="">compile</font>(template,options)<br> return compiled<br> }<br>}
baseOptions
expectHTML:true
modules
klass
staticKeys:['staticClass']
transformNode
genData
style
staticKeys:['staticStyle']
transformNode
genData
model
preTransformNode
directives
model
text
html
isPreTag
tag==='pre'
isUnaryTag
可以单闭合标签
mustUseProp
canBeLeftOpenTag
isReservedTag
html相关
svg相关
getTagNamespace
staticKeys:genStaticKeys(modules)
把modlules中的staticKeys包含在一块儿
编译
parse
parseHTML
匹配开始标签：处理属性
element=createASTElement(tag,attrs,currentParent)
{<br>type:1,<br>tag,<br>parent,<br>children:[],<br>attrList:[{name:'',value:''}...],<br>attrMap:{name:value},<br>rawAttrsMap:{name:{name:'',value:''},....}<br>}
processFor
形成对象：res: {<br>for: List,<br>alias: item || value,<br>itorator1: index || key,<br>itorator2: undefined || index<br>}
对象res都会通过extend的形式添加到el上
processIf
if exp : el.ifConditions:[{exp:exp,block:el}]
v-else: el.else = true
v-else-if: el.elseif = elseif-exp
processOnce
v-once: el.once=true
processElement
processRef
el.ref=refexp
el.refInFor
循环检查父元素在不在for里，有一个在即在
processSlotContent
<template scope="xxx">, <div slot-scope="xxx"><br>el.slotScope=exp
el.slotTarget<br>el.slotTargetDynamic
processSlotOutlet
el.slotName=exp
processComponent
el.is = exp
el.inlineTemplate
processAttrs
el.events:{name:[xx,xx,xx...]}<br>
el.directives:{name:{}}
el.attrs:[key:{},key:{},...]
匹配结束标签：处理父子关系，v-if等关系
optimize
generate
genstatic
_m
genOnce
_o
genIf
(exp){return}
genChildren
genSlot
_t(slotName,children)
genComponent
_c(componentName,data,children)
genData
data:{<br> key: xx,<br> tag:xx,<br> attrs:[],<br> on:[xx],<br> nativeOn:[xx],<br> scopedSlots: _u<br>}
0 条评论
下一页
